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

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/