javascript - 如何在 mouseleave 上删除数据集

Question

我是新手。我有类似的具有动态背景颜色的块，所以我没有确切的背景颜色，因为它可以随时更改。但我在数据属性中有静态颜色。我想在 mouseenter 上将其属性添加到我的 div 并在 mouseleave 上删除。我该怎么做？我的 HTML 代码：

<div class="block" data-hover-bg="#a30003">
<div>

我的js：

$( ".block" ).mouseenter(function() {
    this.style.backgroundColor = this.dataset.hoverBg;
});

那么如何在 mouseleave 上删除这个数据集呢？它应该反复工作。

谢谢。

Answer 1

使用另一个data-*属性来记住旧的背景颜色：

$( ".block" ).on({
  mouseenter() {
    $(this).data('hover-bg-old', $(this).css('background-color')); // Remember it
    $(this).css('background-color', $(this).data('hover-bg'));
  },
  mouseleave() {
    $(this).css('background-color', $(this).data('hover-bg-old')); // Reset it
  }
});

.block {
  padding: 30px;
  background: gold; /* Say this element already has a default background */
}

<div class="block" data-hover-bg="#a30003">test</div>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

PS：在纯 HTML 中className应该是class

Answer 2

在这里，您可以在 mouseover 和 mouseleave 上动态添加/删除背景颜色。

HTML 代码：

<div class="block" data-hover-bg="#a30003" style="background-color: #dddddd">Text</div>

查询代码：

$(".block").mouseover(function(){
    $(this).data('leave-bg', $(this).css('background-color'));
    $(this).css('background-color', $(this).data('hover-bg'));
}).mouseleave(function(){
    $(this).css('background-color', $(this).data('leave-bg'));
    $(this).removeData('leave-bg');
});