為什麼我的JavaScript onmouseover事件不啟動？

Question

在我的Meteor應用程式中，我想要回應一個名為 "onmouseover "的事件。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;
}

CSS: 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

Brian的回答一针见血。下面是工作原理（只是不得不改变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() {
   . . .