用Javascript选择除一个元素以外的所有元素

Question

我正在制作一个javascript效果，如： 它将有几个图像。当用户将鼠标悬停在当前图像上时，所有其他图像都会淡出，但鼠标结束的图像保持不变。 有点像“this”关键字。

喜欢：假设以下是三个图像

如果用户将鼠标移到“2”img上，那么所有其他（1和3）应该淡出，但“2”应该保持不变。

http://74.53.198.125/~elven/ameer/csstemplate/

Answer 1

$('a:not(:hover)')

如果我的问题是对的。如果你的框架支持这个：悬停在选择器引擎中（例如jQuery）。否则，您可以绑定悬停事件并模仿它。

Answer 2

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>
$('img').hover(function(){
    $('img:not(:hover)').fadeOut();
});
</script>

Answer 3

您可以为所有图像提供相同的类，并使用.each()函数淡化所有图像，并将只显示鼠标的图像

$('.imgClass').mouseover(function(){

        $(".imgClass").each(function(){

            $(this).fadeOut();

        })

        $(this).fadeIn();
});

当鼠标不在时

     $(".abcd").mouseout(function(){

            $(".abcd").each(function(){

                $(this).fadeIn();

            })



          })

Answer 4

我要离开褪色的部分;）

var foo = function(a,where){
  var length = where.getElementsByTagName('img').length;
  for(var i=0; i<length;i++){
    var img = where.getElementsByTagName('img')[i];
    if(img != a){ // all images except the hovered image
      img.style.display = 'none';
    }
    else{ // the hovered one
      img.style.display = 'block';
    }
  }
}

style.display ..不会褪色..那部分取决于你;）

像这样使用

<img src="...." onmouseover="foo(this,document.getElementById('divContainerForAllMyImages'));" />