不使用jQuery，图像更改不透明度 [英] Image change opacity on hover without jQuery

问题描述

我试图列出社交按钮。当一个按钮悬停时亮起，其他按钮应该变暗。

我把它部分地工作了。当第一个按钮悬停时，所有的工作都可以正常工作，但是当其他按钮悬停时，它会发生故障。我认为这是因为所有后面的列表项都是第一个和：hover 事件的兄弟，不能导致以前的元素改变样式。
有没有人有任何想法如何让这个工作？

这里的代码（ jsFiddle live demo ）：
$ b

< 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;
背景颜色：黑色;
职位：亲属;
}

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

-webkit-transition：全部0.2s缓出;
-moz-transition：全部0.2s缓出;
-o-transition：全部0.2s缓进;
过渡：全部0.2s缓出;
}



#social_buttons {
list-style-type：none;
位置：绝对;
top：20px;
right：70px;

-webkit-transition：全部0.2s缓出;
-moz-transition：全部0.2s缓出;
-o-transition：全部0.2s缓进;
过渡：全部0.2s缓出;
}


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

-webkit-transition：全部0.2s缓出;
-moz-transition：全部0.2s缓出;
-o-transition：全部0.2s缓进;
转型：所有0.2s缓出;
}


/ * puur css3多个悬停动画* /
＃item_1 {
opacity：0.8;
}
＃item_1：hover〜＃item_2，：hover〜＃item_3 {
opacity：0.5;
}
＃item_1：悬停{
opacity：0.9;
}


＃item_2 {
opacity：0.8;
}
＃item_2：hover〜＃item_1，：hover〜＃item_3 {
opacity：0.5;
}
＃item_2：悬停{
opacity：0.9;
}

＃item_3 {
opacity：0.8;
}
＃item_3：hover〜＃item_1，：hover〜＃item_2 {
opacity：0.5;
}
＃item_3：悬停{
opacity：0.9;



解决方案

正确的选择器

jsFiddle

  ul li {
 opacity：0.8; 
} 
 
 ul：hover li {
 opacity：0.5; 
} 
 
 ul li：hover {
 opacity：1.0; 
} 
  

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;
}

解决方案

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;
}

这篇关于不使用jQuery，图像更改不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！