jquery - 禁用单击 div 但不悬停？

Question

我试图禁用对 div 的点击，但不禁用悬停。 我正在尝试使用 css:pointer-events:none;，但它也会禁用悬停效果。

我也尝试过使用 jquery，但没有成功。

有什么办法可以实现吗？

Answer 1

只用一行代码

$("#yourdivid").off('click');

试试这个例子

$(function () {
    $("#banner-message").click(function(){
    $(this).removeClass("alt");
  });
    $("#banner-message").off('click');//this line disable click event
    $("#banner-message").hover(function(){
         $(this).addClass("alt");
    });
    
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Disable Click Event and Enable for Hover</p>
</div>