鼠標懸停/鼠標移開多個元素，但是相同的圖像

我有2個問題...鼠標懸停/鼠標移開多個元素，但是相同的圖像

（1）I有我想要當懸停[類似於魔線]出現上述我的導航元素的圖標，但而不是將圖標放置在每個導航元素的上方多次，我只想放置一次圖標，並在懸停時重複該圖標？（2）當談到jQuery時，我仍然是一個noob，所以我的代碼很長時間以適合我的喜好。請在下面找到我想縮短的代碼，如果我能得到一些反饋和建議，那將是很棒的。謝謝。

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

來源

2014-09-30 Damo Little

首先，我會給圖像的通用類，所以你可以在附加的事件（'了mouseenter mouseover'，'鼠標離開mouseout'）處理器一個選擇器。 – melancia 2014-09-30 16:04:03

所有這些元素的ID以'綿羊'開頭基本相同，但只是重複？ – melancia 2014-09-30 16:06:48

如果你給你的元素的數據目標屬性：

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

這樣，你重視所有的對象一次，每個都影響正確的目標。

來源

2014-09-30 16:06:03

類添加到所有的羊class='sheep'
要麼添加行CSS .sheep {display:none;}或jQuery的$('.sheep').hide();
改變你的羊類模仿懸停ID：不id='sheep1但class='sheep aboutSheep'
添加一類到你的懸停元素class='do_hover'

你的懸停功能：

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

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

});

來源

2014-09-30 16:04:16 superUntitled

除非我沒有得到它，這不會創建多個元素共享相同的'ID'嗎？ _not id ='sheep1 but id ='aboutSheep'_ – melancia 2014-09-30 16:05:16

我沒有注意到對單個綿羊的多重引用。不用擔心，只要讓這個班級，而不是一個身份證件。我會更新我的答案。 – superUntitled 2014-09-30 16:43:10

這個答案更多的是關於如何通過考慮如何有效地命名事物來最小化代碼。 – superUntitled 2014-09-30 16:45:29

爲什麼使用jquery的時候只能用css？

例如：

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

來源

2014-09-30 16:23:49 vasilistolz

鼠標懸停/鼠標移開多個元素，但是相同的圖像

回答

相關問題