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

我試圖創建一個效果，因此當我將鼠標懸停在圖像上時，div中其他圖像的圖像不透明度會發生變化，但不會影響其中一個。 http://www.mintel.com/meet-the-team/page/2 在div中的其他元素的懸停更改圖像不透明度

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

我要使用這個功能，但是這會改變懸停我如何能不使用jQuery啓動任何建議整個div的透明度？

來源

2014-01-23 user3219182

我建議看波谷你鏈接的網站的JavaScript。看看你是否能找到有用的東西。 – JochemQuery

你可以用純CSS實現。 – Vucko

我做了類似的事情：http://jsfiddle.net/a9zL7/ – Dharman

With純粹的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/

來源

2014-01-23 10:27:35

完美！謝謝 – user3219182

假設每個塊（圖像+文本）將有.item類。

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

希望你明白了。

來源

2014-01-23 09:37:03

謝謝！懸停功能適用於普通的JavaScript還是那些mootools？ – user3219182

噢我的，我讀過「與Jquery」，不是沒有。但這可以簡單地在純js中完成。 –

給所有的圖像一個普通的類。然後你可以使用這個選擇：

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

來源

2014-01-23 09:39:36 nmoliveira

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

回答

相關問題