Mouseover/MouseOut для нескольких элементов, но то же самое изображение

Question

У меня есть 2 вопроса ...

(1) У меня есть значок, я хочу, чтобы появиться выше моих навигационных элементов при наведении над [аналогично волшебной линии], но вместо того, чтобы значок был помещен несколько раз над каждым элементом навигации, я просто хочу поместить значок один раз и повторить его, когда он зависнет?

(2) Я по-прежнему ноу-хау, когда дело доходит до jQuery, поэтому мой код подходит для моей симпатии. Пожалуйста, найдите код ниже, который я хотел бы сократить, и если бы я мог получить некоторую обратную связь и предложения, которые были бы замечательными. Благодарю.

$(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(); 
    }); 
}); 

Answer 1

Если вы даете элементы в данных целевой атрибут:

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

И тогда в ваших событий, которые вы можете сделать:

$("#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(); 
    }); 

Таким образом, Вы придаете все объекты сразу, и каждый влияет на правильную цель.

Answer 2

1. Добавьте класс всех овец class='sheep'
2. Либо добавить строку в CSS .sheep {display:none;} или JQuery $('.sheep').hide();
3. Измените класс овец, чтобы имитировать парения идентификатор: не id='sheep1 но class='sheep aboutSheep'
4. Add класс для ваших элементов управления. class='do_hover'

5. Функция наведения:

   $(".do_hover").hover(function(){ 
   
       var theSheep = '.' + $(this).attr('id') + 'Sheep'; 
       $(theSheep).toggle(); 
   
   }); 
   

Answer 3

Зачем использовать jquery, когда вы можете использовать только css ??

пример:

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

подробнее Use :hover to modify the css of another class?