为什么我的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事件不会触发？

回答

相关问题