CODEWITHSUNDEEP
jquery
Damo Little
Damo Little

Reputation: 3

mouseover / mouseout for multiple elements but the same image

I have 2 questions...

(1) I have an icon I want to appear above my navigation elements when hovered over [similar to the magic line] but instead of having the icon placed multiple times above each navigation element, I just want to place the icon once and have it repeated when hovered over?

(2) I am still a noob when it comes to jQuery, so my code is way to long for my liking. Please find the code below that I would like to shorten and if I could get some feed back and suggestions that would be great. Thanks.

$(document).ready(function(){
    $("#sheep1, #sheep2, #sheep3, #sheep4, #sheep5").hide();

    $("#about").mouseover(function(){
        $("#sheep1").show();
    });

    $("#about").mouseout(function(){
        $("#sheep1").hide();
    });

    $("#graphics").mouseover(function(){
        $("#sheep2").show();
    });

    $("#graphics").mouseout(function(){
        $("#sheep2").hide();
    });

    $("#web").mouseover(function(){
        $("#sheep3").show();
    });

    $("#web").mouseout(function(){
        $("#sheep3").hide();
    });

    $("#blog").mouseover(function(){
        $("#sheep4").show();
    });

    $("#blog").mouseout(function(){
        $("#sheep4").hide();
    });

    $("#contact").mouseover(function(){
        $("#sheep5").show();
    });

    $("#contact").mouseout(function(){
        $("#sheep5").hide();
    });
});

Upvotes: 0

Views: 2352

Answers (3)

Brian Mains
Brian Mains

Reputation: 50728

If you give your elements a data-target attribute:

<div id="about" data-target="#sheep1">

And then in your events you can do:

$("#about, #graphics, #web, #blog")
  .on("mouseover", function(e) {
     var target = $(this).data("target");
     $(target).show();
  }).on("mouseout", function(e) {
     var target = $(this).data("target");
     $(target).hide();   
  });

This way, you attach to all the objects at once, and each affects the correct target.

Upvotes: 2

superUntitled
superUntitled

Reputation: 22527

  1. Add a class to all the sheep class='sheep'
  2. Either add line to css .sheep {display:none;} or jquery $('.sheep').hide();
  3. Change your sheep class to mimic the hover id: not id='sheep1 but class='sheep aboutSheep'
  4. Add a class to your hover elements class='do_hover'

  5. Your hover function:

    $(".do_hover").hover(function(){

  var theSheep = '.' + $(this).attr('id') + 'Sheep';
  $(theSheep).toggle();

});

Upvotes: 0

vasilistolz
vasilistolz

Reputation: 11

why use jquery when you can use only css??

example:

#about:hover #sheep1{
   display:none;
}​

more info Use :hover to modify the css of another class?

Upvotes: 1

Related Questions