4

我该如何制作才能使不透明度正常，直到有人将鼠标悬停在它上面，当他们将鼠标悬停在它上面时，图片会亮起，但会将其他图像发送到背景？我还希望图像淡入淡出。

例子

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

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

4

3 回答 3

9

我想为此贡献一个纯 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;
}

我将一步一步地解释这一点，首先很抱歉从头开始做这个，你的 HTML 让我很生气，所以来解释一下，首先我制作所有的li inline，而不是使用ul li img并将所有图像设置为opacity: 1;，好吧不是必需的但我确实设置了，后来我使用transition属性来平滑动画。下一个选择器是，当您将鼠标悬停在上面时ul:hover li img，它将简单地使图像不透明，这意味着它将所有图像设置为不透明，最后我们通过使用任何图像设置为.5ul.5opacity1hoverul:hover li img:hover

于 2013-09-07T05:26:14.623 回答
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 的过渡。

于 2013-09-07T05:12:17.230 回答
0

使用 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”功能。然后我可以添加或删除设置 opacity 属性的相关 CSS 类。

于 2013-09-07T03:24:42.040 回答