鼠标输入和鼠标离开不起作用

MouseEnter and mouseleave does not work

本文关键字：鼠标 不起作用 离开 输入      更新时间：2023-09-26

我正在尝试使用mouseenter和mouseleave来更改图标的背景，但它真的很麻烦。当我将鼠标悬停在图标上时，背景会发生变化，当我将鼠标移出时，背景应该会恢复正常，但有时不会。谁能帮忙？

我的代码：

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));

我无法使用 CSS，因为悬停时背景图像是动态的。

如果你只希望背景在悬停时改变，你有没有想过用CSS而不是JavaScript来做这件事？

#item {
  background-image: url(someImage);
}
#item:hover {
  background-image: url(someOtherImage);
}

在没有条件的情况下尝试以下代码，以了解出了什么问题：

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));

编辑：假设有时你的代码工作和突然停止

编辑2：也许，可以是浏览器的缓存，请尝试：

var d = new Date();
var n = d.getTime();
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + '?=' + d + ')');

请看这个例子

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>

相关文章：