Question

How can I make all links inside a given div change color when the mouse is inside the div?

I have this set up:

nav.main {
    border: 1px dashed black;
    width: auto;
    height: auto;
    overflow: hidden;
    list-style: none;
}

nav a {
    color: black;
    text-decoration: none;
}

div.button:hover, a:hover {
    position:relative;
    background:#000000;
    color: white;
}

This does exactly what I want it to do, but it will only change the link color when you’re hovering over the LINK itself, instead of changing the link colors when the mouse is inside the div.

How do I fix this?

Answer 1

change the last one from div.button:hover, a:hover to div.button:hover a. This will not require at least one link to be hovered, just the div.

Example: http://jsfiddle.net/GBzbp/