為什么我的 JavaScript onmouseover 事件沒有觸發？

Question

在我的流星的應用程序，我想回應到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 （當然，當我嘗試使用它而不是click時）不會觸發。 那么我怎樣才能得到對圖像上的hover 、 enter或mouseover事件的響應呢？

Answer 1

您正在尋找的事件是mouseenter和mouseleave 。 Meteor 網站上沒有很好地記錄可用事件，但您可以在 Github 上的這篇文章中看到它們的列表。

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

Answer 2

布賴恩的回答一針見血。 這是有效的（只需更改 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() {
   . . .