DIV bei :hover einfärben

[chuvak]

Ich habe einen DIV mit einem Link. Das Ganze gehört zur Klasse "button".

<div class="button">
<a href="start.php">Start</a>
</div>

Wenn man mit der Maus über den Link fährt, soll sich die Hintergrundfarbe der DIV-Box ändern, jedoch ändert sich nur die Hintergrundfarbe des Links.

.button a:hover
{
   background-color: #FF0000;
}

Was mache ich falsch?

 

[Sven Mintel]

Moin,

ich würde mal behaupten, mit CSS ist dies nicht machbar, da es in CSS keine parent-Selektoren gibt.
Ich lasse mich aber auch gerne eines Besseren belehren.

 

[Maik]

Hi,

Sven liegt da mit seiner Einschätzung soweit goldrichtig, und in dieser Konstellation wäre Javascript vonnöten.

Vermutlich willst du aber hierauf hinaus, dass der Hintergrund des <a>-Elements die Fläche des <div>-Elements vollständig ausfüllt:

.button {
   width:150px;
   height:22px;
   border:1px solid #ff0000;
}
.button a {
   display:block;
   height:100%;
}
.button a:hover {
   background:#ff0000;
}

mfg Maik

 

[awortmeier]

Falls die hier gepostet Lösungen nicht gehen, könnte man aber auch einen onClick Event auf den Button legen und so die Hintergrundfarbe ändern.

Nur als Denkanstoß falls noch benötigt