jQuery spm

Jeg fandt ud af det - Dog sidder jeg stadig med et problem - Når det er jeg hover mit link, så fader der forskellige div inde - Jeg har 4 divs og fade imellem.

Jeg vil gerne have at når den ene div bliver faded ind, så bliver de 3 andre sat til display: none;

Min JS:

  <script type="text/javascript">
   
    $(document).ready(function() {
   
      $("#headeroverlay a").each(function() {
         
          $(this).hover(function(){
            var sID = '#'+$(this).attr('class');
              //alert(sID)
              alert(sID);
              $(sID).fadeIn("slow");
          });
     
      });
   
    });
    </script>

Dette er mit HTML

<div id="headeroverlay">
                    <a class="o1" href="#">Link1</a>
                    <a class="o2" href="#">Link2</a>
                    <a href="#">Link3</a>
                    <a href="#">Link4</a>
                </div>
                <div id="o1" style="display: none;"></div>
                <div id="o2" style="display: none;"></div>
                <div id="o3" style="display: none;"></div>
                <div id="o4" style="display: none;"></div>

Prøv med noget i denne dur:


    $(document).ready(function() {
        $("#headeroverlay").find("div").each(function() {
            $(this).css("display", "none");
        });
        $("#headeroverlay a").hover(function() {
            var sID = '#' + $(this).attr('class');
            //alert(sID);
            $(sID).fadeIn("slow");
        });
    });

Hov nej.. det hels skulle lige være inden for hover handleren:

    $(document).ready(function() {
        $("#headeroverlay a").hover(function() {
            $("#headeroverlay").find("div").each(function() {
                $(this).css("display", "none");
            });

            var sID = '#' + $(this).attr('class');
            //alert(sID);
            $(sID).fadeIn("slow");
        });
    });



:)

Og hvis du allerede har fundet et svar for lidt tid siden, skal du bare sige til. Jeg er alligevel ikke ude efter points. :)