javascript - 使用 JQuery 悬停 CSS

Question

我想在悬停时编辑元素的渲染。为此，我创建了一个 button，我希望第一个 click 设置悬停渲染，第二个 click 重置悬停渲染。目前，即使我不在 div 上，也会出现 hover 样式:

$("#editer-script").click(function() {
  var clicks = $(this).data('clicks');

  if (clicks) {
    $('.contenu-editable').mouseover(function(){
        $('.contenu-editable').css("background-color", "transparent");
        $('.contenu-editable .fa.fa-pencil').css("display", "none");
    });
    $("#editer-script").text('Rendre éditable');
  } else {
    $('.contenu-editable').mouseover(function(){
        $('.contenu-editable').css("background-color", "#f4f6f9");
        $('.contenu-editable .fa.fa-pencil').css("display", "inline-block");
    });
    $("#editer-script").text('Ne pas rendre éditable');
  }

  $(this).data("clicks", !clicks);
});

预先感谢您的帮助。

Answer 1

我会使用两个不同的 CSS 类。一种是默认值，一种是用于更改 hover 效果。然后只需在 click 按钮元素上切换第二个类。

这比尝试按照您的方式进行操作要容易得多，并且可以仅在 css 中轻松更改和扩展它。以后不用再碰脚本了。

$("#editer-script").click(function() {
  var clicks = $(this).data('clicks');

  $('.contenu-editable').toggleClass('special', !clicks);
  $("#editer-script").text(clicks ? 'Rendre éditable' : 'Ne pas rendre éditable');

  $(this).data("clicks", !clicks);
});

.contenu-editable:hover {
  background-color: transparent;
}

.contenu-editable:hover .fa.fa-pencil {
  display: none;
}

.contenu-editable.special:hover {
  background-color: #f4f6f9;
}

.contenu-editable.special:hover .fa.fa-pencil {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editer-script">Rendre éditable</button>
<div class="contenu-editable">
  <i class="fa fa-pencil">pencil</i>
  content
</div>