怎么移除css的hover事件
Posted 忧郁的蛋~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么移除css的hover事件相关的知识，希望对你有一定的参考价值。
移除css hover事件的方法：1、；通过“$("a").hover(function() alert('mouseover'); , function() alert('mouseout'); )”方法绑定hover事件；2、通过“$('a').off('mouseenter').unbind('mouseleave');”方法取消绑定的hover事件即可。
jquery中取消和绑定hover事件的正确方式
在网页设计中，我们经常使用jquery去响应鼠标的hover事件，和mouseover和mouseout事件有相同的效果，但是这其中其中如何使用on去绑定hover方法呢？如何用off取消绑定的事件呢？
一、如何绑定hover事件
先看以下代码，假设我们给a标签绑定一个click和hover事件：
$(document).ready(function() $('a').on( hover: function(e)
//Hover event handler
alert("hover"); ,
click: function(e) // Click event handler
alert("click"); );
);
当点击a标签的时候，奇怪的事情发生了，其中绑定的hover事件完全没有反应，绑定的click事件却可以正常响应。
但是如果换一种写法，比如：
$("a").hover(function() alert('mouseover'); , function()
alert('mouseout'); )
应该使用 mouseenter 和 mouseleave 这两个事件来代替,(这也是 .hover() 函数中使用的事件)
所以完全可以直接像这样来引用:
$(document).ready(function() $('a').on( mouseenter: function(e)
//Hover event handler
alert("mouseover"); , mouseleave: function(e)
//Hover event handler
alert("mouseout"); , click: function(e)
// Clickevent handler
alert("click"); );
);
因为.hover()是jQuery自己定义的事件，是为了方便用户绑定调用mouseenter和mouseleave事件而已，它并非一个真正的事件，所以当然不能当做.on()中的事件参数来调用。
二、如何取消hover事件
大家都知道，可以使用off函数去取消绑定的事件，但是只能取消通过bind绑定的事件，jquery中的hover事件是比较特殊的，如果通过这种方式去绑定的事件，则无法取消。
$("a").hover(function() alert('mouseover'); , function()
alert('mouseout'); )取消绑定的hover事件的正确方式：
$('a').off('mouseenter').unbind('mouseleave');
移除移动设备上的 :hover 事件
【中文标题】移除移动设备上的 :hover 事件【英文标题】：Remove the :hover event on mobile devices 【发布时间】：2016-09-30 11:46:59 【问题描述】：我在网站上运行了:hover 事件，但是当您在移动设备上使用该系统时我遇到了问题。
有没有办法在 css 或 js 中删除它？我尝试了很多东西，但我没有运气。
我尝试了modernizr.com 和媒体查询，但没有成功。
我的 sass 代码：
ul
li
padding: 20px;
&:hover
background-color: $red;
color: $black;
媒体查询：
@media (max-width: $screen-sm-min)
ul
li
&:hover
color: inherit;
cursor: pointer;
sass mq 变量：
$screen-sm-min: 768px;
【问题讨论】：
虽然你已经尝试过媒体查询，但我还是会让你知道它是可能的。请分享你的代码 我用代码编辑我的问题。 为什么不只应用所需宽度的悬停样式，而不是将它们应用到所有宽度然后尝试撤消它们？ 【参考方案1】：您可以使用 CSS 媒体查询来实现交互功能，但它们相对较新，iOS9 + 和 Android 5+：http://caniuse.com/css-media-interaction
您可以使用仅在此功能可用的情况下应用 :hover 样式
/* :hover will only work in Edge, Chrome, Safari 9+ for now */
@media (hover: hover)
.your-selector:hover
color: red;
或者，如果您现在想要更广泛的支持，请尽可能删除:hover：
/* :hover will be removed in iOS 9+ and Android 5+ */
.your-selector:hover
color: red;
@media (hover: none)
.your-selector:hover
color: oldcolor;
如果您想要更广泛的支持，您需要通过 javascript 检测触摸功能。一个相当标准的方法是：
/* add a class to <html> */
var isTouch = 'ontouchstart' in window;
document.documentElement.className += isTouch?' touch ':' no-touch ';
/* only use hover when the no-touch class is present */
.no-touch
.your-selector:hover
color: red;
在您的代码中使用最后一个解决方案：
ul
li
padding: 20px;
.no-touch &:hover
background-color: $red;
color: $black;
【讨论】：
我学到了一些新东西 - 谢谢。从未将媒体查询用于交互功能 - 我将从现在开始！ 如果我使用带触摸屏和鼠标的笔记本电脑会怎样？以上是关于怎么移除css的hover事件的主要内容，如果未能解决你的问题，请参考以下文章