Search code examples
csshoverselectorparentchildren

CSS hover selector not working

I'm encountering a strange css issue.

It's possibly because I don't use classes, but names of tags directly, but I want to learn what the problem is, so that I don't repeat it.

my HTML is like this:

<div class='container'>
    <div class='top'>
        <a href='href.com'>hover here..</a>
    </div>
    <div class='bottom'>
        <a>..and this should change</a>
    </div>
</div>

and what I tried with CSS:

.top a:hover .bottom a
{
    color:#f00; /* does not work */
}
.top a:hover .container
{
    background-color:#f00; /* does not work */
}
.top a:hover
{
    color:#f00; /* works */
}

So why the calls on other elements are not working?

Or is it because I'm calling parent from child?

If so, how can I make it work?

Thanks !

Solution

  • Your css is wrong, your forgot commas:

    .top a:hover, .bottom a:hover
{
    color:#f00;
}
.top a:hover, .container:hover /* Comma was missing here */
{
    background-color:#f00;
}