在div中其他元素懸停時更改圖像不透明度

Question

我正在嘗試創建一種在此處使用的效果，以便當我將鼠標懸停在圖像上時，div中其他圖像的圖像不透明度會發生變化，但是懸停的圖像不會發生變化。 http://www.mintel.com/meet-the-team/page/2

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

我將使用此功能，但這會在懸停時改變整個divs的不透明度。關於如何不使用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');
});