Question

所以我有一点问题。我有一堆div都是同一个类，我做了它，当鼠标在它们上面时，它们获得一个边框，当鼠标关闭时它们会失去相同的边框。问题是我还向他们添加了一个点击事件，但是一旦我点击它们，它们就不再响应于mouseenter / mouseleave事件和点击事件。换句话说，在第一次点击后，所有事件都消失了。

这是我的div的

<div class="hover-div series-div image-series-div">
            <img class="slide-div-series-image" src="../../Imagens/PBSerie.jpg">
            <b class="slide-font">Serie lel</b>
        </div>
        <div class="hover-div series-div image-series-div">
            <img class="slide-div-series-image" src="../../Imagens/stargateATLSerie.jpg">
            <b class="slide-font">Serie lel</b>
        </div>
        <div class="hover-div series-div image-series-div">
            <img class="slide-div-series-image" src="../../Imagens/stargateATLSerie.jpg">
            <b class="slide-font">Serie lel</b>
        </div>
        <div class="hover-div series-div image-series-div">
            <img class="slide-div-series-image" src="../../Imagens/stargateATLSerie.jpg">
            <b class="slide-font">Serie lel</b>
        </div>
        <div class="hover-div series-div image-series-div">
            <img class="slide-div-series-image" src="../../Imagens/stargateATLSerie.jpg">
            <b class="slide-font">Serie lel</b>
        </div>

这是我处理事件的Jquery

$(".hover-div").on({
  click: function() {
    buildPage($(this).prop("id"));
  }, mouseenter: function() {
    var width = $(this).width();
    var height = $(this).height();
    $(this).css("box-shadow", "0 0 0 2px white inset");
  }, mouseleave: function() {
    var width = $(this).width();
    var height = $(this).height();
    $(this).css("box-shadow", "none");
  }
});

有谁知道如何解决这个问题？

提前致谢

编辑：好的，我现在确定问题依赖于点击事件。它只触发一次，它还会禁用其他事件吗？

Answer 1

经过快速测试后，我认为您的代码没问题，因为您只需使用不同的盒子阴影颜色，如下所示：

$(this).css("box-shadow", "0 0 0 2px red inset");

你可以在div上看到一个红色框。

点击事件触发Jquery后保持悬停事件

1 个答案: