Image change opacity on hover without jQuery

Question

I am trying to make a list of social buttons. When one button is hovered it lights up, and the other buttons should darken.

I got it to work partially. When the first button is hovered all works fine, but it is malfunctioning when the other buttons are hovered. I think this happens because all the latter list items are siblings of the first and the :hover event can't cause previous elements to change style. Does anyone have any thoughts on how to get this to work?

Here's the code (jsFiddle live demo):

<div id="bg">

<ul id="social_buttons">
    <li id="item_1"><img src="http://i43.tinypic.com/104rasi.png"></li>
    <li id="item_2"><img src="http://i43.tinypic.com/k4tide.png"></li>
    <li id="item_3"><img src="http://i44.tinypic.com/2ry0gt3.png"></li>
</ul>

</div>

#bg {
    height: 100px;
    width: 215px;
    background-color: black;
    position: relative;
}

#social_buttons img {
     width: 24px; 
     height: 24px;

    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}



#social_buttons {
    list-style-type: none;
    position: absolute;
    top: 20px;
    right: 70px;

    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}


#social_buttons li {
    float: left;
    margin-right: 2px;

    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}


/*  puur css3 multiple hover animaties */
#item_1 {
    opacity: 0.8;
}
#item_1:hover ~ #item_2, :hover ~ #item_3 {
    opacity: 0.5;
}
#item_1:hover {
    opacity: 0.9;
}


#item_2 {
    opacity: 0.8;
}
#item_2:hover ~ #item_1, :hover ~ #item_3 {
    opacity: 0.5;
}
#item_2:hover {
    opacity: 0.9;
}

#item_3 {
    opacity: 0.8;
}
#item_3:hover ~ #item_1, :hover ~ #item_2 {
    opacity: 0.5;
}
#item_3:hover {
    opacity: 0.9;
}

Here at Stack Overflow, code is usually favored over a link to a website, because once the link has changed, the question will no longer have historical value. Visit [here](http://stackoverflow.com/editing-help) for help with formatting code into your question. It may also be helpful to use a [jsFiddle](http://jsfiddle.net) to help illustrate your point. — Cody Guldner, Jul 02 '13 at 20:22
You'd be surprised just how often jsfiddle is either down or exceptionally slow. — cimmanon, Jul 02 '13 at 20:27
@CodyGuldner The jsfiddle can be reached with the tinyurl ;) stackoverflow would't let me post a jsfiddle link without code but i was it to much of a hurry to find out how to include code correctly — Willem Leuverink, Jul 02 '13 at 20:27
@WillemLeuverink I've put the code in for you. Click [edit](http://stackoverflow.com/posts/17435158/edit) to see how I did it. In short, indent all code by four spaces. And with some languages on this site, including HTML and CSS, you also have to include a comment like `` so the language is highlighted correctly. — Rory O'Kane, Jul 02 '13 at 20:34

score 5 · Answer 1 · answered Jul 02 '13 at 20:29

5

Something like this?

#social_buttons:hover li {
    opacity: 0.5;
}

#social_buttons li:hover {
    opacity: 0.9;
}

General sibling selector (~) can't select preceding element, it works only in one direction.

answered Jul 02 '13 at 20:29

Ilya Streltsyn

13,076
2
37
57

score 3 · Accepted Answer · answered Jul 02 '13 at 20:29

3

This is actually pretty easy with the right selectors

jsFiddle

ul li {
    opacity: 0.8;
}

ul:hover li {
    opacity: 0.5;
}

ul li:hover {
    opacity: 1.0;
}

answered Jul 02 '13 at 20:29

Dan Grahn

9,044
4
37
74

score 1 · Answer 3 · answered Jul 02 '13 at 20:29

1

http://jsfiddle.net/VnMFP/4/

#social_buttons li {
    opacity: 0.8;
}

#social_buttons:hover li {
    opacity: 0.5;
}

#social_buttons li:hover {
    opacity: 0.9
}

Don't select the li:hover, select ul#social_buttons:hover li. Then it works.

answered Jul 02 '13 at 20:29

bwoebi

23,637
5
58
79

Image change opacity on hover without jQuery

3 Answers3

Linked