CODEWITHSUNDEEP
javascripthtmlcss
Ameer
Ameer

Reputation: 771

Selecting all except one element with Javascript

i am making a javascript effect which goes like: it will have a couple of images. when the user hovers over the current image all the other images fadeout but the image that the mouse is over stays the same. kinda like opposite to "this" keyword.

like: suppose the following are three images

enter image description here

if the user takes his mouse over the '2' img then all the other (1 and 3) should fadeout but '2' should remain the same.

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

Upvotes: 1

Views: 2046

Answers (4)

Sangeet Menon
Sangeet Menon

Reputation: 9905

You could give all the images the same class and use .each() function to fade all of them and unfade just the one that has the mouse over

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

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

            $(this).fadeOut();

        })

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

When the mouse is out

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

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

                $(this).fadeIn();

            })



          })

Upvotes: 0

GorillaMoe
GorillaMoe

Reputation: 4134

I'm leaving the fading part ;)

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.. is no fading.. that part is up to you ;)

use it like this

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

Upvotes: 0

rickyduck
rickyduck

Reputation: 4084

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

Upvotes: 0

shabunc
shabunc

Reputation: 24731

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

If I get the question right. This if your framework is supporting :hover in selector engine (jQuery does, for example). Otherwise, you can bind on hover event and mimic it.

Upvotes: 2

Related Questions