gpt4 book ai didi

css - 没有 jQuery 悬停时图像更改不透明度

转载 作者:太空宇宙 更新时间:2023-11-04 13:54:30 25 4
gpt4 key购买 nike

我正在尝试制作一个社交按钮列表。当一个按钮悬停时它会亮起,而其他按钮应该变暗。

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

这是代码(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

#social_buttons:hover li {
opacity: 0.5;
}

#social_buttons li:hover {
opacity: 0.9;
}

普通兄弟选择器(~)不能选择前面的元素,它只能在一个方向上起作用。

关于css - 没有 jQuery 悬停时图像更改不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17435158/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com