Jag har en meny som är skapad med en div. I den finns ungefär tio rader med en länk på varje. Jag hade tänkt att när jag håller musen över raden med en länk så ska hela bakgrunden färgas i en ny färg.
Så blir det, men hela raden med länken tolkas som en länk i stället för bara texten.
diven heter vmeny. Så här ser CSS-koden ut: När jag tar bort display:block från #vmeny a:link räknas inte hela raden som en länk, men då måste jag föra musen över själva länken, inte bara över raden, för att bakgrundsfärgen ska bytas.
Tyvärr fungerar följande teknik inte i "Dinosaurien" MSIE (som ju inte stödjer CSS2) - men annars hade du kunnat använda följande, i mitt tycke ganska eleganta, princip för att få till det du vill utan att använda javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Meny med CSS2</title>
<style type="text/css">
<!--
#meny {
width:200px;
border:1px solid silver;
color:silver;
background-color: navy;
}
#meny a,
#meny div {
background-color:gray;
color:white;
text-decoration:none;
}
#meny a:hover,
#meny div:hover,
#meny div:hover a {
/* cursor: pointer; kan man ta med här också om man vill ha "fingret" på hela raden */
background-color:silver;
color:white;
}
/* underline bara vid hover över själva länken */
#meny a:hover { text-decoration:underline; }
-->
</style>
</head>
<body>
<div id="meny">
CSS2-version
<div><a href="#">Ett</a></div>
<div><a href="#">Två</a></div>
<div><a href="#">Tre</a></div>
<div><a href="#">Fyra</a></div>
</div>
</body>
</html>
Testa i Mozilla eller Opera så får du se ;)
Det enda som inte funkar i MSIE6 är just detta att raderna byter färg när man för markören över dem (färgen byts i MSIE bara när man "hovrar" över själva länken)
