禁用:单击鼠标悬停

时间:2015-05-08 07:30:50

标签: javascript jquery css

我有一个悬停的div

.div {
  // css
}
.div:hover {
  // css
}

但是,当您点击div时,我想禁用悬停。

5 个答案:

答案 0 :(得分:14)

选项1. Javascript解决方案

只需添加一个禁止在点击时使用悬停样式的类:



$('div').on('click', function() { // when you click the div
  $(this).addClass('no-hover'); // add the class 'no-hover'
});

div {
  color: blue;
}
div:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>hover!</div>
&#13;
&#13;
&#13;

选项2. CSS解决方案

或者,在纯CSS中(尽管没有规则持久性)

&#13;
&#13;
div {
  color: blue;
}
div:not(:focus):hover {
  color: red;
}
div:focus {
  outline: none;
}
&#13;
<div tabindex="0">hover!</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

所有你需要的是:

$('[your selector]').css({'pointer-events': 'none'})

答案 2 :(得分:0)

试试这样:

$('#myid').on({
    mouseover: function(){
        $(this).css({background: '#F94'});
    },
     mouseleave: function(){
        $(this).css({background: '#DDD'});
    },
    click: function(){
        $(this).off('mouseleave');
    }
});

<强> JSFIDDLE DEMO

答案 3 :(得分:0)

试试这个:

<强> JQUERY

$(function() {                       //run when the DOM is ready
  $(".div").click(function() {  //use a class, since your ID gets mangled
    $(this).addClass("active");      //add the class to the clicked element
  });
});

<强> CSS

.div.active:hover {
cursor:default;
//same CSS as the DIV

}

答案 4 :(得分:0)

.disabled {

  opacity: 0.5;
  pointer-events: none;

}

.disabled:hover *

  pointer-events: none;
  cursor: not-allowed;

}