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

我正在尝试创建一个在这里使用的效果，这样当我将鼠标悬停在一个图像上时，div中其他图像的图像不透明度会改变，而不是悬停在上面的图像。

我本来打算使用这个函数，但这会改变悬停时整个divs的不透明度 关于如何在不使用jquery的情况下开始工作，有什么建议吗

假设每个块（图像+文本）都有

.item

类

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

---

希望你能理解。

给你所有的图片上一堂普通课。 然后可以使用此选择器：

$(".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');
});

---

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

代码：

var rows=document.getElementsByClassName（'demo'）；
对于（变量i=0；i

---

演示：

我建议您查看链接站点的javascript。看看你是否能找到有用的东西。你可以用纯CSS实现。我做了类似的事情：在CSS中，当我将当前不透明度设置为1时，它的设置为悬停不透明度。团队图片{opacity:1；&:not（：hover）{opacity:0.7；}谢谢！悬停函数适用于普通javascript还是mootools？哦，天哪，我读过“使用Jquery”，不是没有。但这可以简单地在纯js中完成。

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

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

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|$)/, '');
        }
    };
}