悬停时更改不透明度 [英] Change opacity on hover

问题描述

我如何制作它以使不透明度正常，直到有人在它上面盘旋并且当它们悬停在它上面时图片亮起但将其他图像发送到后台？我也希望图像淡入淡出。

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.

示例

这是 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.

推荐答案

我添加了一个简单的类和这个JS来完成你正在寻找的东西：

I added a simple class and this JS to accomplish what you're looking for:

$('.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的过渡。

I removed the image-targeted CSS, as its parent opacity will trickle down. Also added in a transition similar to what Gazelle has.

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