爲什麼我的JavaScript onmouseover事件不會觸發？

在我的Meteor應用程序中，我想要響應圖像的onmouseover事件，並在鼠標懸停時「彈出」圖像（如「放大」）。我有這樣的代碼：爲什麼我的JavaScript onmouseover事件不會觸發？

HTML：

<template name="postTravelSection1"> 
    <div class="hide" id="postTSec1" name="postTSec1"> 
    <h2>Post-Travel Top</h2> 
    <img id="imgPostTravelTop" name="imgPostTravelTop" src="images/1_PTE_Top_Jig.png" alt="post Travel image" height="280" width="350"> 
    </div> 
</template>

CSS：

.popout_image{ 
    width: 400px; 
    height: 320px; 
} 
.shadow { 
    -moz-box-shadow: 3px 3px 4px #000; 
    -webkit-box-shadow: 3px 3px 4px #000; 
    box-shadow: 3px 3px 4px #000; 
}

的JavaScript：

Template.postTravelSection1.events({ 
    // 'onmouseover #imgPostTravelTop': function() { 
    'click #imgPostTravelTop': function() { 
    $('#imgPostTravelTop').addClass('popout_image'); 
    $('#imgPostTravelTop').addClass('shadow'); 
    $('#imgPostTravelTopRight').removeClass('popout_image'); 
    $('#imgPostTravelTopRight').removeClass('shadow'); 
    $('#imgPostTravelTopCenter').removeClass('popout_image'); 
    $('#imgPostTravelTopCenter').removeClass('shadow'); 
    $('#imgPostTravelTopBottom').removeClass('popout_image'); 
    $('#imgPostTravelTopBottom').removeClass('shadow'); 
    } 
});

的「click」事件工作正常，但「的onmouseover」（當我嘗試使用它，而不是「點擊」當然）不會觸發。那麼如何獲得對圖像上的「懸停」，「輸入」或「鼠標懸停」事件的響應？

來源

2015-09-21 B. Clay Shannon

如果你想改變一個DOM對象的樣式基於鼠標*懸停* [你可以這樣做]（http：// www .w3schools.com/cssref/sel_hover.asp）在CSS中100％無任何js。爲什麼這是困難的方式？ –

我覺得這樣，但爲什麼CSS比JS更受歡迎？ –

對於初學者來說簡單得多！另外它自動處理* mouseenter *和* mouseleave *。頂部的櫻桃：更快。 –

您正在尋找的事件是mouseenter和mouseleave。 Meteor網站上的可用事件沒有很好記錄，但您可以在Github上的this posting中查看它們的列表。

Template.postTravelSection1.events({ 
    'mouseenter #imgPostTravelTop': function() { 
    //enlarge the image 
    }, 
    'mouseleave #imgPostTravelTop': function() { 
    //shrink the image 
    } 
});

來源

2015-09-21 18:18:33

布賴恩的答案擊中了頭部。這裏是什麼工程（只需改變JavaScript）：

Template.postTravelSection1.events({ 
    'mouseenter #imgPostTravelTop': function() { 
    $('#imgPostTravelTop').addClass('popout_image'); 
    $('#imgPostTravelTop').addClass('shadow'); 
    }, 
    'mouseleave #imgPostTravelTop': function() { 
    $('#imgPostTravelTop').removeClass('popout_image'); 
    $('#imgPostTravelTop').removeClass('shadow'); 
    } 
}); 

Template.postTravelSection2.events({ 
    'mouseenter #imgPostTravelTopRight': function() { 
    . . .

來源

2015-09-21 18:55:33

爲什麼我的JavaScript onmouseover事件不會觸發？

回答

相關問題