悬停时更改不透明度

Question

如何使不透明度正常，直到有人将光标悬停在上面时，图片会变亮但其他图片会被推到后台？我还希望图片能淡入淡出。

示例

这里是jsfiddle。

img { 
opacity: 0.7; 
} 

img:hover { 
opacity: 1; 
}
.radio div[type='radio'] {
background: transparent;
border:0px solid #dcdcdc;
border-radius:10px;
padding:0px;
display: inline-block;
margin-left: 5px;
cursor:pointer;
text-align: left;
opacity: 0.7;
}
.radio div:hover[type='radio'] {
opacity: 1; 
}

那个不透明度很好，但我希望图像在有人悬停在上面之前保持其正常的不透明度。

- user2680614

Answer 1

我希望为此提供一个纯CSS的解决方案。

演示请参见Demo。

ul li {
    display: inline-block;
}

ul li img {
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

ul:hover li img {
    opacity: .5;
}

ul:hover li img:hover {
    opacity: 1;
}

我将逐步解释这个问题，首先很抱歉因为你的HTML让我困扰，所以现在开始解释。首先将所有的li设置为inline，然后使用ul li img将所有图像设置为opacity:1;，虽然不是必需的，但我还是这样做了，接下来使用transition属性使动画更加平滑。下一个选择器是ul:hover li img，当你悬停在ul上时，它会简单地将所有的图像变为0.5的不透明度，这意味着它会将所有图像设置为0.5的不透明度，并且最后我们使用ul:hover li img:hover将opacity设置为1，当你悬停在任何图像上时。

- Mr. Alien

---

啊，是的，来自上方。不错。 - probablyup

我最喜欢的CSS答案之一。 - CodyBugstein

Answer 2

这种功能最好通过JavaScript实现。看一下这个JS Fiddle：http://jsfiddle.net/LgZeB/4/

$('.images a').on('mouseover', function () {
    $('.images a').not(this).addClass('fade');
}).on('mouseout', function() {
    $('.images a').removeClass('fade');
});

使用jQuery，我可以插入DOM元素的“mouseover”和“mouseout”函数。然后我可以添加或删除相关的CSS类，设置不透明度属性。

- Mahesh

---

我必须更改所有的类。你能用我的代码提供一个例子吗？ - user2680614

我问这个问题的原因是，我用 '.radio div' 代替了 '.images a'，但没有任何反应。 - user2680614

我添加了另一个名为q2的类，并将其与代码放在一起，但它没有淡出。我需要所有东西都淡出。 - user2680614

Answer 3

我添加了一个简单的类和这个JS来实现你想要的功能：

$('.radio').on('mouseover mouseout', 'div[type="radio"]', function(){    
    $(this).siblings().toggleClass('hover');
});

.radio div[type='radio'].hover {
    opacity: 0.5;
}

http://jsfiddle.net/Cx35C/3/

我移除了针对图像的CSS，因为其父元素的不透明度会向下传递。同时添加了类似Gazelle的过渡效果。

- probablyup