CODEWITHSUNDEEP
csshovereffect
Greg
Greg

Reputation: 117

Hover Effect Multiple Child Elements

Is it possible to keep an element hover effect when hovering over a sibling element? I created a jfiddle to demonstrate. I'm trying to keep the .child-menu-img 100% opacity while hovering over the H3 text. I figured out that when hovering over the .child-menu div I can affect the h3 using .child-menu-item:hover>h3 but I can't find a way to keep the hover effect working while hovering over the h3. Hope this makes sense! I'm wondering if this will require jQuery but so far, my searches haven't found any solution (javascript or pure CSS). Or maybe I need to modify my markup in order to get this working. I'm so lost!

Thanks for any help!

http://jsfiddle.net/inhouse/rfexypLz/

Upvotes: 1

Views: 2633

Answers (1)

omma2289
omma2289

Reputation: 54639

Seems like you need to use .child-menu-item:hover as the base for all your hover state styles:

.child-menu-item:hover a>img {
    opacity: 1;
    filter:alpha(opacity=100);
}
.child-menu-item:hover>h3 {
    background:white;
}
.child-menu-item:hover h3 a {
    opacity: 1;
    filter: alpha(opacity=100);
    text-decoration: none;
}

Updated fiddle

Upvotes: 1

Related Questions