为什么我的JavaScript onmouseover事件不火
Why does my JavaScript onmouseover event not fire?
在我的Meteor应用程序中,我想响应图像的onmouseover
事件,并在鼠标位于图像上方时"弹出"图像(如"放大")。我有这样的代码:
<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
事件的响应呢?
您正在寻找的事件是mouseenter
和mouseleave
。可用的事件在Meteor网站上没有很好的记录,但是你可以在Github上看到它们的列表。
Template.postTravelSection1.events({
'mouseenter #imgPostTravelTop': function() {
//enlarge the image
},
'mouseleave #imgPostTravelTop': function() {
//shrink the image
}
});
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() {
. . .
相关文章:
- onmouseover事件行为不端
- chrome中的onmouseover(下拉选项标记)事件不起作用-php,javascript
- 在onmouseover事件中更改图像,并为每个事件设置中断/间隔
- 结合onmouseover事件和<a>标签
- Javascript:在每个onmouseover事件之后执行2个函数
- 如何在 JavaScript 中的元素上触发 Onmouseover 事件
- GraphDracula:如何检测onclick和onmouseover事件
- Javascript/Jquery删除和添加'onmouseover'setinterval上的事件
- php代码中的onmouseover和onmouseout事件;不起作用
- onmouseover事件仅在第二次鼠标悬停后才起作用
- onmouseover事件不起作用
- 鼠标传递选项时选择标记事件/使用onmouseover选择选项
- JavaScript 中的 onmouseover 和 onmouseout 事件
- onmouseover在click和mouseout事件之前触发
- onMouseOver,同时按下鼠标左键(事件)
- 如何让onmouseover交换事件一直保持到onmouseout,直到下一个onmousever事件
- 如何通过onmouseover事件停止jquery旋转木马
- 从一系列onMouseOver事件中创建一个循环
- Onmouseover和onmouseout事件在页面加载时触发,而不是在事件时触发
- 使用JavaScript,为什么我的onmouseover事件没有被触发