Achtergrond kleur met hover

[Funkz0r]

Hoi iedereen,

Ik ben sinds kort bezig met het maken van een eigen linkpagina in HTML.
Maar nu ondervind ik een probleempje waar ik zo 1.2.3 geen oplossing voor weet.

Het is namelijk de bedoeling dat als men met hun muis over een link gaat, de hele row in kleur komt.
Nu heb ik het zover gekregen dat de link zelf bij "hover" een andere kleur krijgt, maar het is juist de bedoeling dat de hele row in kleur is.

Hopelijk kan iemand onderstaande code checken, en zien wat ik fout doe, en evt. tips geven.

Ps: let niet op de kleurcodes, die heb ik gepakt om het te proberen.

<style>


	TABLE.tabelcat{
		background-color: #005684;
    border: 0px;
		padding: 0px 0px 0px 0px;
		width: 250px;
		margin-bottom: 12px;
	}
	TD.cattitel{
		padding: 2px 4px 2px 4px;
		font-family: Arial;
		font-size: 12px;
		font-weight: bold;
		color: #B2CBD9;
	}
	TD.links{
		background-color: #B2CBD9;
		padding: 4px 4px 4px 4px;
		font-family: Arial;
		font-size: 12px;
		color: Black;
	}
	td.links a:link{color:#000000;}
	td.links a:active{color:#000000;}
	td.links a:visited{color:#000000;}
	td.links a:hover{color:#ffffff;}
	
	td a:link{color:black;}
	td a:active{color:black;}
	td a:visited{color:black;}
	td a:hover{color:black;}
	
	TABLE.footer a:link{color:#000000;text-decoration: none;}
	TABLE.footer a:active{color:#000000;text-decoration: none;}
	TABLE.footer a:visited{color:#000000;text-decoration: none;}
	TABLE.footer a:hover{color:#000000;text-decoration: none;}
	TABLE.header{
		font-family: Arial;
		font-size: 12px;
		color: #800000;
	}
	TABLE.footer{
		background-color: #800000;
		font-family: Arial;
		font-size: 12px;
		color: #FFFFCC;
		font-weight: bold;
		text-decoration: none;
	}


	
	
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	background-color:#FFCCFF;
}

.link { 
   text-decoration:none;
   display:block;
}

a:active {
	text-decoration: none;
}
.style2 {color: #B00000}
.style13 {
	color: #990000;
	font-weight: bold;
}
.style15 {
	font-size: 10pt;
	color: #000000;
}
.style16 {
	font-size: 10pt;
	font-family: Arial;
}
.style18 {font-size: 9px}
.style19 {font-family: Arial}
.style20 {
	font-size: 9px;
	font-family: Arial;
}
.style22 {color: #B00000; font-size: 10px; }
</style>

 

[Tha Devil]

kwestie van td:hover gebruiken
Voorbeeld: http://stefantalen.net/taken/

 

[Funkz0r]

kwestie van td:hover gebruiken
Voorbeeld: http://stefantalen.net/taken/

Waar in mijn code moet ik dit dan plaatsen?

 

[Tha Devil]

Wat dacht je van je CSS

 

[Funkz0r]

Wat dacht je van je CSS

Snap ik.

Maar als ik hem implementeer in mijn code, werkt het niet.

Sorry voor de n00bie vragen, maar ik werk nog niet zo lang met html/css.

 

[Tha Devil]

Hmm iets te snel antwoord gegeven, het moet tr:hover zijn.

Dus

tr:hover {
  color: white;
  background-color: black;
}

 

[Funkz0r]

Hmm iets te snel antwoord gegeven, het moet tr:hover zijn.

Dus

tr:hover {
  color: white;
  background-color: black;
}

Als ik tr:hover gebruik, dan word de hele rij in die kleur.

En als ik td ipv tr gebruik, dan kleurt de linkachtergrond wel, maar niet de hele regel.

Ik wil het graag zoals hier te zien is.
Als je daar over een link gaat, dan word de hele regelachtergrond gekleurd.

Bij mij is het nu zo dat dus alleen de linkachtergrond van kleur veranderd.

Zal wel iets simpels zijn, maar ik krijg het niet gevonden.

 

[Tha Devil]

Komt omdat ze daar gebruik maken van lijsten.

Dus dit werkt niet?

td:hover {
  color: white;
  background-color: black;
}

 

[Funkz0r]

Komt omdat ze daar gebruik maken van lijsten.

Dus dit werkt niet?

td:hover {
  color: white;
  background-color: black;
}

Met die code krijg ik onderstaand effect:

Het hele blok kleurt zwart, en de andere links in dat blok vallen weg.
Het is dus alleen de bedoeling dat de regel waar de muis op staat van achtergrondkleur verandert, en niet het hele blok.

Dit is dus met die code.

 

[Tha Devil]

Tja dan kun je net zo goed de code van je voorbeeld kopiëren.
Die werkt met een lijst, die zijn wat makkelijker te stijlen.

 

[Funkz0r]

Tja dan kun je net zo goed de code van je voorbeeld kopiëren.
Die werkt met een lijst, die zijn wat makkelijker te stijlen.

Klinkt allemaal heel simpel, maar voor een n00bie zoals ik is het dat niet...

Dat zou betekenen dat de hele code zoals ik die nu heb staan, helemaal verandert/aangepast moet gaan worden, en dat is denk ik iets te veel van het goede voor een beginner.

Dan zal ik het maar laten zoals het was.

Toch bedankt voor je hulp.

 

[dicabrio]

Hoi Funkz0r

Als ik het goed begrijp wil je een lijst maken met daarin linkjes die van achtergrond kleur veranderen. Als ik denk aan lijstjes met links denk ik aan:

<ul class="linklist">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>

en niet aan een table

als je nu over een link zou gaan wil je dat zijn achtergrondkleur aanpast dit doe je in CSS met de pseudo selector ":hover" dit zetten we op de a

dan komt je style er zo uit te zien:

<style>
.linklist li { border: 1px solid black; }
.linklist a:hover {
  background-color: #ccc;
}
</style>

als je dit gaat bekijken dan zie je dat je background color niet aansluit bij de omlijning die ik de li heb gegeven. dit komt door de eigenschap van een A element (domnode).
Een A element is geen "block level element" en vult daarom niet uit. Je zou dan eigenlijk de pseudo selector op de "LI" willen zetten, zodat de "LI" van achtergrond kleur veranderd, maar dit werkt dan weer niet lekker in IE6. Ik zou het voor de gein eens even proberen om te zien wat het effect is:

<style>
.linklist { width: 400px; } /* even een breedte gegeven */
.linklist li { border: 1px solid black; }
.linklist li:hover { /* ik heb hier de hover op de li gezet */
  background-color: #ccc;
}
</style>

Een niet "block level element" kun je het gedrag geven van een "block level element"

door de volgende css notatie te geven "display: block". Je style code ziet er dan als volgt uit

<style>
.linklist { width: 400px; } /* even een breedte gegeven */
.linklist li { border: 1px solid black; }
.linklist a {display: block; }
.linklist a:hover {
  background-color: #ccc;
}
</style>

volgende properties voor een unorderdlist voor css zijn ook handig
margin/padding/list-style