MouseEnter和mouseleave不起作用
[英]MouseEnter and mouseleave does not work
问题描述
I'm trying to use mouseenter and mouseleave to change the background of an icon, but it is really bugger. 
我正在尝试使用mouseenter和mouseleave更改图标的背景，但这确实很麻烦。 When I hover over the icon, the background changes, when I move my mouse out, the background should go back to normal, but sometimes it doesn't. 当我将鼠标悬停在图标上时，背景会发生变化，当我将鼠标移出时，背景应该会恢复正常，但有时却不会。 Can anyone help? 有人可以帮忙吗？
My code: 我的代码：
catItem$.on('mouseenter', function (e) {
e.preventDefault();
var target$ = $(e.currentTarget),
newCategory = target$.attr('data-dest'),
newCategoryItem = this.categories[newCategory];
if (newCategory.isClicked) {
return;
}
target$.find('.cat-icon').addClass('is-selected');
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + ')');
}.bind(this));
catItem$.on('mouseleave', function (e) {
e.preventDefault();
var target$ = $(e.currentTarget),
newCategory = target$.attr('data-dest'),
newCategoryItem = this.categories[newCategory];
if (!newCategoryItem.isClicked) {
target$.find('.cat-icon').removeClass('is-selected');
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.darkIconImageURL + ')');
}
}.bind(this));
I can't use CSS because the background image is dynamic on hover. 我无法使用CSS，因为背景图片在悬停时是动态的。
3 个解决方案
解决方案1
1 2016-04-27 14:01:12
If you only want the background to change on hover, have you thought about doing this with CSS rather than with JavaScript? 如果您只想在悬停时更改背景，是否考虑过使用CSS而不是JavaScript进行此操作？
#item {
background-image: url(someImage);
}
#item:hover {
background-image: url(someOtherImage);
}
解决方案2
0 2016-04-27 13:59:57
Try this code without the conditions to maybe understand what's going wrong: 在没有条件的情况下尝试此代码，以了解发生了什么问题：
catItem$.on('mouseenter', function (e) {
e.preventDefault();
var target$ = $(e.currentTarget),
newCategory = target$.attr('data-dest'),
newCategoryItem = this.categories[newCategory];
target$.find('.cat-icon').addClass('is-selected');
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + ')');
}.bind(this));
catItem$.on('mouseleave', function (e) {
e.preventDefault();
var target$ = $(e.currentTarget),
newCategory = target$.attr('data-dest'),
newCategoryItem = this.categories[newCategory];
target$.find('.cat-icon').removeClass('is-selected');
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.darkIconImageURL + ')');
}.bind(this));
Edit: assuming that sometimes your code works and sudden stops
EDIT2: Maybe, can be browser's cache, try:
var d = new Date(); var n = d.getTime(); target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + '?=' + d + ')');
解决方案3
-1 2016-04-27 14:09:02
Please see this example 请看这个例子
var i = 0; $(".overout") .mouseover(function() { i += 1; $(this).find("span").text("mouse over x " + i); }) .mouseout(function() { $(this).find("span").text("mouse out "); }); var n = 0; $(".enterleave") .mouseenter(function() { n += 1; $(this).find("span").text("mouse enter x " + n); }) .mouseleave(function() { $(this).find("span").text("mouse leave"); });
.out { width: 40%; height: 120px; margin: 0 15px; background-color: #d6edfc; float: left; } .in { width: 60%; height: 60%; background-color: #fc0; margin: 10px auto; } p { line-height: 1em; margin: 0; padding: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="out overout"> <span>move your mouse</span> <div class="in"> </div> </div> <div class="out enterleave"> <span>move your mouse</span> <div class="in"> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.