title: Simplifing a group of mouseover functions jquery
body: <p>Let me start by saying that this is working correctly, but I know it's not the most efficient way of coding it and I'm lacking the knowledge / understanding as to how to do this.</p>
  
  <p>For this specific problem, i have 8 different events that are using a mouseover / mouseout function where it is hiding other classes that aren't the said hover. I'm curious as to have it work for say an infinite amount of events with just a simple block of code.</p>
  
  <p>Any help would be greatly appreciated.  Here is my code thus far...</p>
  
  <pre>
  function hoverBar() {
  
       $(".song1result").mouseover(function(){
              $('.barReadout').not('.bar1').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar1').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song2result").mouseover(function(){
              $('.barReadout').not('.bar2').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar2').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song3result").mouseover(function(){
              $('.barReadout').not('.bar3').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar3').fadeTo('fast', 1.0, function() {});
      });
  
       $(".song4result").mouseover(function(){
              $('.barReadout').not('.bar4').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar4').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song5result").mouseover(function(){
              $('.barReadout').not('.bar5').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar5').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song6result").mouseover(function(){
              $('.barReadout').not('.bar6').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar6').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song7result").mouseover(function(){
              $('.barReadout').not('.bar7').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar7').fadeTo('fast', 1.0, function() {});
      });
  
           $(".song8result").mouseover(function(){
              $('.barReadout').not('.bar8').fadeTo('fast', 0.1, function() {});
          }).mouseout(function(){
              $('.barReadout').not('.bar8').fadeTo('fast', 1.0, function() {});
      });
  }
  </pre>
  
  <p>Thanks!! Matt</p>
  
  <p>Edit:  </p>
  
  <p>I was lead to the correct answer from Shad's response although it required a bit of tinkering.  </p>
  
  <p>Here's my working solution:</p>
  
  <pre>
  
  function hoverBar2() {
      $('.songresult').mouseover(function(){
      var ID=$(this).attr('id').replace('#','');
      var ID2 = ID.replace('res','');
  
     $('.barReadout').not('#bre' + ID2).fadeTo('fast', 0.1, function() {}); 
  }).mouseout(function(){
               var ID=$(this).attr('id').replace('#bre','');
          ///  alert(ID);
     $('.barReadout').not('#bre' + ID).fadeTo('fast', 1.0, function() {}); 
      });
  
  
  
  }</pre>