CODEWITHSUNDEEP
htmlcsshover
August
August

Reputation: 12558

Hovering on element activates hover CSS for another element

I'm making a menu with an icon and some text, like this:

enter image description here

The problem is, I want the icon to be "highlighted" when I hover over the tab, instead of having to hover above the tiny icon. So this is what happens now:

enter image description here

enter image description here

So my question is how can I hover on one element (the tab is a div), and that activates the hover CSS for another element (the icon).

This is the code for the icon: (HTML)

<a href="#" class="menubutton">
   <span id="playicon"></span> Servers
</a>

(CSS)

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

#playicon:hover {
    background-image:url(img/svg/play_hover.svg);
}

Thank you in advance! :)

Upvotes: 2

Views: 7079

Answers (3)

VenomVendor
VenomVendor

Reputation: 15382

#element1:hover #element2

Live example, with more advanced css techniques

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

Use the :hover pseudo class on the menubutton instead of the icon

#playicon {
    width:12px;
    height:12px;
    background-image:url("img/svg/play2.svg");
    background-repeat:no-repeat;
    display:inline-block;
}

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}

Upvotes: 0

Jon
Jon

Reputation: 437336

With the HTML you give, you need to change the second rule to 

.menubutton:hover #playicon {
    background-image:url(img/svg/play_hover.svg);
}

This rule applies to #playicon when it is a descendant of a hovered .menubutton, which is what you want (using the child selector .menubutton:hover > #playicon might be a good idea, although it won't make any practical difference).

Also, please note that having a <span> like this identified by an id is somewhat strange -- it looks like you would have multiples of this span on the same page, and ids need to be unique. If you do have multiples, replace the id with a class.

Upvotes: 5

Related Questions