小编Wil*_*ink的帖子

我正在尝试列出社交按钮.当一个按钮悬停时,它会亮起,其他按钮会变暗.

我让它部分工作了.当第一个按钮悬停时,一切正常,但是当其他按钮悬停时,它会出现故障.我认为这是因为所有后面的列表项都是第一个的兄弟,:hover事件不能导致以前的元素改变样式.有没有人对如何使这个工作有任何想法？

这是代码(jsFiddle现场演示):

<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: …