没有jQuery的悬停图像改变不透明度

Posted 2023-03-06

【中文标题】没有jQuery的悬停图像改变不透明度

【英文标题】：Image change opacity on hover without jQuery

【发布时间】：2013-06-30 09:15:14

【问题描述】：

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

我让它部分工作。当第一个按钮悬停时一切正常，但是当其他按钮悬停时它会出现故障。我认为这是因为后面的所有列表项都是第一个的兄弟，: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;

【问题讨论】：

在 Stack Overflow，代码通常比网站链接更受青睐，因为一旦链接发生变化，问题将不再具有历史价值。访问here 获取有关将代码格式化为您的问题的帮助。使用jsFiddle 来帮助说明您的观点也可能会有所帮助。

@CodyGuldner tinyurl-link 是一个 jsfiddle ;-)

@bwoebi 代码很高兴在问题中看到

您会惊讶于 jsfiddle 经常出现故障或异常缓慢。

@CodyGuldner 可以使用 tinyurl 访问 jsfiddle ；）*** 不允许我发布没有代码的 jsfiddle 链接，但我非常急于找出如何正确包含代码

【参考方案1】：

类似this?

#social_buttons:hover li 
    opacity: 0.5;


#social_buttons li:hover 
    opacity: 0.9;

通用兄弟选择器（~）不能选择前面的元素，它只能在一个方向上起作用。

【参考方案2】：

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

不要选择li:hover，选择ul#social_buttons:hover li。然后就可以了。

【参考方案3】：

使用正确的选择器实际上很容易

jsFiddle

ul li 
    opacity: 0.8;


ul:hover li 
    opacity: 0.5;


ul li:hover 
    opacity: 1.0;