Question

我正在尝试使用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，因为背景图片在悬停时是动态的。

Answer 1

如果您只想在悬停时更改背景，您是否考虑过使用CSS而不是JavaScript？

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

Answer 2

尝试不带条件的代码，以便了解出现了什么问题：

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

编辑：假设有时您的代码有效且突然停止
EDIT2：也许，可以是浏览器的缓存，请尝试：
var d = new Date();
var n = d.getTime();
target$.find('.cat-icon').css('background-image', 'url(' + newCategoryItem.lightIconImageURL + '?=' + d + ')');

Answer 3

请参阅此示例

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>

MouseEnter和mouseleave不起作用

3 个答案: