悬停时更改不透明度

时间:2013-09-07 03:03:57

标签: javascript html css opacity

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

Example

这是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; 
}

不透明度很好,但我希望图像具有正常的不透明度,直到有人将鼠标悬停在它上面。

3 个答案:

答案 0 :(得分:9)

我想为此

贡献纯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,当您将鼠标悬停在.5上时,只会使图片对ul不透明,这意味着它会将所有图片的不透明设置为.5,最后我们使用opacity

1 hover时将ul:hover li img:hover设置为{{1}}

答案 1 :(得分:1)

我添加了一个简单的类和这个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的过渡。

答案 2 :(得分:0)

使用Javascript可以更好地实现这种功能。看看这个JS小提琴: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类。