achtergrond + tekstkleur veranderen

Status
Niet open voor verdere reacties.
K

Kevin We

Gebruiker
Lid geworden
8 sep 2005
Berichten
119
hoi allemaal


ik ben op zoek naar het volgende: ik wil bij het "mouseover" van mijn menu de achtergrondkleur van een volledige tabelcel en de tekstkleur wijzigen.

bijvoorbeeld: klik hier voor een vb

Nu vroeg ik mij af hoe men dit doet, bij het mouseover-mouseout event lukt het mij enkel maar om OF de achtergrondkleur te veranderen OF de voorgrondkleur.

Bij het a:hover voor de links wordt enkel de achtergrondkleur van het woordje aangepast, terwijl ik wil dat het volledige rechthoekje (cel van een tabel) wordt aangepast.


MvG
 
HTML: 
<html>
<head>
 <title>Voorbeeldje</title>
 <style type="text/css">
  .rij:hover {
    background: black;
    color: white;
  }
  .rij {
    background: red;
    color: black;
  }
 </style>
</head>
<body>
 In een tabel:
 <table>
  <tr class="rij">
   <td>Rij 1 vak 1</td>
   <td>Rij 1 vak 2</td>
  </tr>
  <tr>
   <td>Rij 2 vak 1</td>
   <td>Rij 2 vak 2</td>
  </tr>
 </table>
 In een div:
 <div class="rij">Helpmij</div>
</body>
</html>
Als het goed is moet de eerste rij veranderen van kleur wanneer je er overheen gaat.
 
misschien een rare vraag maar als ik dit als menu wil gebruiken. Dan zet ik er een <a href= ...> tag rond ... En dan is het effect van de achtergrond weer weg ... Of is er een andere (betere) manier om dit te doen?
 
Dan moet je even de a:hover aanpassen in de class, onderstaand even toevoegen aan het stylesheet.
HTML: 
.rij a:hover {
    background: black;
    color: white;
}
 
Aan alleen een CSS heb ik niet veel wanneer ik niet kan zien waar deze wordt toegepast.

Dit zal wellicht beter werken.
HTML: 
<html>
<head>
 <title>Voorbeeldje</title>
 <style type="text/css">
  .rij a{
    background: black;
    color:white;
    display: block;
  }
  .rij {
    background: red;
    color: black;
  }
  .rij a:hover {
    background: orange;
    color:white;
  }
 </style>
</head>
<body>
 In een tabel:
 <table>
  <tr class="rij">
   <td>Rij 1 vak 1</td>
   <td>Rij 1 vak 2</td>
  </tr>
  <tr>
   <td>Rij 2 vak 1</td>
   <td>Rij 2 vak 2</td>
  </tr>
 </table>
 In een div:
 <div class="rij"><a href="test.html">help</a></div>
</body>
</html>
 
dit was het dus blijkbaar maakt die 'display: block' behoorlijk wat uit en daar was ik dus nooit achter gekomen.


Misschien dat ook iemand weet waar mijn a:hover in het volgende stukje niet werkt?

HTML: 
#CenterLayer .LinkerLayer .MenuLinks a:link {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}
	
#CenterLayer .LinkerLayer .MenuLinks a:active {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}

#CenterLayer .LinkerLayer .MenuLinks a:hover {
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	color:#666666;
	}
	
#CenterLayer .LinkerLayer .MenuLinks a:visited {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}


HTML: 
<div id="CenterLayer>
 <div class="LinkerLayer">
	            <p class="Titel">Titel :: </p>
	            <div class="MenuLinks">
	              <p><a href="../index.html">&gt; Menu</a></p>
	              <p><a href=""> &gt; Menu  </a></p>
	            </div>
</div>

in mijn ogen is hier totaal niets verkeerd aan de a:hover maar hij werkt niet (tekst veranderd niet van kleur). Heb de proef op de som genomen en eens een achtergrondkleur veranderd en dit werkte wel dus nu ben ik precies helemaal gek aant worden :confused:
 
Laatst bewerkt:
Als dit alle code is dan is het handiger om alleen een CSS te maken voor #CenterLayer (of alleen voor .MenuLinks)

Alles wat binnen die code staat zal dan de eigenschappen krijgen.

HTML: 
<div id="CenterLayer">
 <div class="LinkerLayer">
  <p class="Titel">Titel :: </p>
  <div class="MenuLinks">
   <p><a href="../index.html">&gt; Menu</a></p>
   <p><a href=""> &gt; Menu  </a></p>
  </div>
 </div>
</div>

CSS:
PHP: 
#CenterLayer a {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}
	
#CenterLayer a:active {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}

#CenterLayer a:hover {
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:18px;
	color:#666666;
	}
	
#CenterLayer a:visited {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-decoration:none;
	font-size:18px;
	}
 
nee nee, dit is maar een stukje van de code. Dit is de code waarin die css eigenschap wordt toegepast. Ik vond het een beetje nutteloos om mijn volledige website hier op te zetten, omdat je dan nog moest liggen zoeken waar het probleem zich bevind enzo....


grtz
 
Heb je de CSS al toegepast?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan