The goal is to change opacity of all but the image being hovered. So far, I can change opacity for the hovered item but I want to reverse this. A common thing but all the examples don't seem to work for ID's, at least not the way I have done it. Tried a dozen different ways to use :not, no luck. Perhaps someone can make the syntax plain for me? The reason I am capturing the ID to a variable is that eventually I want to be doing other things with the selected image, and the variable is just easier for me to work with given my background.

< p > < span  id = "img1"  class = "gridlayout" > < img  src = "images/grid/first.jpg"  alt = ""  /> </ span > 

   < span  id = "img2"  class = "gridlayout" > < img src = "images/grid/second.jpg"  alt = ""  /> </ span > 

   < span  id = "img3"  class = "gridlayout" > < img  src = "images/grid/third.jpg"  alt = ""  /> </ span > </ p >

  jQuery(document).ready(function(){

      jQuery(".gridlayout").mouseover(function() {

          var idvar = this.id;              

          jQuery('#' + idvar).css({opacity: 0.5});           

      }); 

  });

or I could use

  jQuery(document).ready(function(){

      jQuery(".gridlayout")

         .mouseover(function() {

            var idvar = this.id;            

            jQuery('#' + idvar).each(function() {

               jQuery(this).css({opacity: 0.5});

            });

      });  

  });