Question

我正在尝试创建一个在这里使用的效果，这样当我将鼠标悬停在图像上时，div中其他图像的图像不透明度会发生变化但不会悬停在图像上。 http://www.mintel.com/meet-the-team/page/2

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){

我打算使用此功能，但这会在悬停时改变整个div的不透明度关于如何在不使用jquery的情况下启动的任何建议？

Answer 1

使用纯CSS我认为不可能（因为你需要一个尚未在CSS中实现的选择器），你可以使用这个纯粹的js解决方案（没有jQuery）。

代码：

var rows = document.getElementsByClassName('demo');
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseenter = function (event) {
        for (var j = 0; j < rows.length; j++) {
            if (rows[j]===this) continue
            rows[j].className += " other";
        }
    };

    rows[i].onmouseleave = function (event) {
        var hovers = document.getElementsByClassName('other');
        var len = hovers.length;
        for (var j = 0; j < len; j++) {
            hovers[0].className = hovers[0].className.replace(/\sother(\s|$)/, '');
        }
    };
}

演示：http://jsfiddle.net/IrvinDominin/7K2Z3/

Answer 2

假设每个块（图像+文本）都有.item类。

var item = $('.item');
item.on('hover', function() {
  item.css('opacity', '0.5');
  $(this).css('opacity', '1');
});

希望你明白这一点。

Answer 3

为您的所有图片提供一个共同的课程。然后你可以使用这个选择器：

$(".commonClass:not(:hover)")

这将选择所有未悬停的图像。

使用mouseenter事件，您可以选择所有未悬停的图片并应用不透明度更改：

$(".commonClass:not(:hover)").css('opacity', '0.5');

添加mouseleave事件以恢复不透明度：

 $(".commonClass:not(:hover)").css('opacity', '1');

所以，你会以这样的结局结束：

$('.commonClass').on('mouseenter', function () {
    $(".commonClass:not(:hover)").css('opacity', '0.5');
});

$('.commonClass').on('mouseleave', function () {
    $(".commonClass:not(:hover)").css('opacity', '1');
});

在div中的其他元素悬停时更改图像不透明度

3 个答案: