在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中的其他元素的悬停更改图像不透明度

回答

相关问题