javascript 悬停时更改不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18669259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change opacity on hover
提问by user2680614
How do I make it so that the opacity is normal until someone hovers over it and when they hover over it the picture lights up but sends the other images to the background? I also want the images to fade in and out.
如何使不透明度正常，直到有人悬停在它上面，当他们悬停在它上面时，图片会亮起，但将其他图像发送到背景？我还希望图像淡入淡出。
Here's the jsfiddle
这是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;
}
That opacity is fine but I want the images to have their normal opacity until someone hovers over it.
这种不透明度很好，但我希望图像具有正常的不透明度，直到有人将其悬停在上面。
采纳答案by probablyup
I added a simple class and this JS to accomplish what you're looking for:
我添加了一个简单的类和这个 JS 来完成你正在寻找的东西：
$('.radio').on('mouseover mouseout', 'div[type="radio"]', function(){
$(this).siblings().toggleClass('hover');
});
.radio div[type='radio'].hover {
opacity: 0.5;
}
I removed the image-targeted CSS, as its parent opacity will trickle down. Also added in a transition similar to what Gazelle has.
我删除了以图像为目标的 CSS，因为它的父不透明度会逐渐下降。还添加了类似于 Gazelle 的过渡。
回答by Mr. Alien
I would like to contribute a pure CSS solution to this
我想为此贡献一个纯 CSS 解决方案
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;
}
I will go step by step to explain this, first of all sorry for making this from scratch, your HTML was killing me, so coming to the explanation, first am making all the liinline, than am using ul li imgand setting all images to opacity: 1;, well not required but I did set, later am using transitionproperty for smoothing up the animation. The next selector is ul:hover li img, will simply make images opaque to .5when you hover over ulthis means it will set opaque all the images to .5, and at last we set opacityto 1when you hoverany image by using ul:hover li img:hover
我将逐步解释这一点，首先很抱歉从头开始制作这个，你的 HTML 害死我了，所以来解释一下，首先是制作所有的liinline，而不是使用ul li img并将所有图像设置为opacity: 1;，不需要但我确实设置了，后来使用transition属性来平滑动画。下一个选择器是ul:hover li img，.5当您将鼠标悬停在上面时，它会简单地使图像不透明，ul这意味着它会将所有图像设置为不透明.5，最后我们通过使用将任何图像设置opacity为1hoverul:hover li img:hover
回答by Mahesh
This kind of functionality is better achieved with Javascript. Take a look at this JS Fiddle: http://jsfiddle.net/LgZeB/4/
使用 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');
});
With jQuery, I'm able to plug into the "mouseover" and "mouseout" functions of the DOM element. Then I can add or remove the relevant CSS class which sets the opacity attribute.
使用 jQuery，我可以插入 DOM 元素的“mouseover”和“mouseout”功能。然后我可以添加或删除设置 opacity 属性的相关 CSS 类。
