onmouseover事件只適用於第二個鼠標後

我寫了一些代碼，當你將鼠標懸停在它上面時，以及一些周圍的元素。它的工作原理非常完美，只是當我第一次將鼠標放在其中一個div上時它永遠不會啓動。如果我先將鼠標放在每個div上，那麼從這一點開始，它就是我所希望的。但我不明白爲什麼它需要2個鼠標。onmouseover事件只適用於第二個鼠標後

HTML

<div id="comic_009" class="comic" onmouseover="resize('#comic_009', '#comic_008', '#comic_007')"></div> 
<div id="comic_008" class="comic" onmouseover="resize('#comic_008', '#comic_009', '#comic_007')"></div> 
<div id="comic_007" class="comic" onmouseover="resize('#comic_007', '#comic_008', '#comic_009')"></div> 
<br class="clear"><br><br> 
<div id="comic_006" class="comic" onmouseover="resize('#comic_006', '#comic_005', '#comic_004')"></div> 
<div id="comic_005" class="comic" onmouseover="resize('#comic_005', '#comic_006', '#comic_004')"></div> 
<div id="comic_004" class="comic" onmouseover="resize('#comic_004', '#comic_005', '#comic_006')"></div> 
<br class="clear"><br><br> 
<div id="comic_003" class="comic" onmouseover="resize('#comic_003', '#comic_002', '#comic_001')"></div> 
<div id="comic_002" class="comic" onmouseover="resize('#comic_002', '#comic_003', '#comic_001')"></div> 
<div id="comic_001" class="comic" onmouseover="resize('#comic_001', '#comic_002', '#comic_003')"></div>

的Javascript

function resize(main, resized1, resized2){ 
      $(main).hover(
       function(){ 
        $(main).css('width', '500px'); 
        $(main).css('height', '400px'); 
        $(main).css('margin-left', '10px'); 
        $(resized1).css('width', '205px'); 
        $(resized1).css('margin-left', '10px'); 
        $(resized2).css('width', '205px'); 
        $(resized2).css('margin-left', '10px'); 
        $("#footer").css('margin-top', '300px'); 
       }, 
       function(){ 
        $(main).css('width', '250px'); 
        $(main).css('height', '200px'); 
        $(main).css('margin-left', '50px'); 
        $(resized1).css('width', '250px'); 
        $(resized1).css('margin-left', '50px'); 
        $(resized2).css('width', '250px'); 
        $(resized2).css('margin-left', '50px'); 
        $("#footer").css('margin-top', '0px'); 
       } 
      ); 
     }

來源

2013-12-09 SometimesDirty

resize()只有套懸停動作在第一次被調用;它實際上並沒有做那個動作。

在用戶首次與頁面進行交互之前，您應該爲每個圖像設置一次懸停操作。你可以通過調用上面的resize(...)的每個排列來做到這一點。但是使用類而不是ID來做這個會更好。

請參閱this fiddle我正在談論的課程。

來源

2013-12-09 01:15:44

好的，我明白了！這就說得通了。這將很容易解決。爲什麼使用類比ID更好？在這種情況下，我有每行有3個圖像的行。當我將鼠標懸停在一張圖像上時，我希望該圖像能夠展開，同時縮小該行中的其他兩張圖像。如果我試圖重用類，我最終會得到不需要的大小改變的元素。對於每個元素使用單獨的類而不是ID有沒有好處？ – SometimesDirty

原因是你可以簡化你的代碼很多。例如，有一個'size_shifting'類，然後是'group_1'，'group_2'等類。每次用戶將鼠標放在具有size_shifting類的項目上時，縮小同一'group_x'類中的所有其他項目。你可以通過一次調用一個函數來設置它，而不是使用大量參數來保持直線。 –

我明白你在說什麼。我一定會看到它會如何工作，並且變得更乾淨。但是我不知道代碼會從一個類中縮減某些元素，而是放大另一個類中的元素。儘管感謝你，但我能夠很快解決我的鼠標懸停問題。它現在工作完美。非常感謝你的幫助！ – SometimesDirty

onmouseover事件只適用於第二個鼠標後

回答

相關問題