blocks|key|968778|text|对relvant元素应用两个类。一个包含悬停行为，另一个包含所有其他样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|968779|然后，您可以使用jquery|968780|$(element).removeClass('hover');|code-block|syntax|javascript|968781|方法移除具有悬停行为的类，然后使用|968782|$(element).bind('mouseover',+function+()+{+doSomething();+});
$(element).bind('mouseout',+function+()+{+doSomething();+});|968783|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Apply two classes to the relvant element. one contains the hover behaviour, and one contains all the other styling.

You can then use the jquery 

<pre><code>$(element).removeClass('hover');
</code></pre>

method to remove the class with the hover behaviour and then apply whatever you want using 

<pre><code>$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });
</code></pre>

blocks|key|202328|text|如何将:hover回退放在一个样式表中，该样式表只有在javascript被禁用时才会加载？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|202329|<noscript>
++<link+href="noscript.css"+rel="stylesheet"+type="text/css"+/>
</noscript>|code-block|syntax|javascript|202330|entityMap^0|3|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

How about putting the <code>:hover</code> fall-back in a stylesheet that is only loaded if javascript is disabled?

<pre><code>&lt;noscript&gt;
 &lt;link href="noscript.css" rel="stylesheet" type="text/css" /&gt;
&lt;/noscript&gt;
</code></pre>

blocks|key|4266291|text|这是一个没有hack类的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4266292|CSS：|4266293|a+{color:+blue;}
a:hover+{color:+red;}|code-block|syntax|javascript|4266294|jQuery+(使用jQueryUI设置颜色动画)：|offset|length|4266295|$('a').hover(+
++function()+{
++++$(this)
++++++.css('color','blue')
++++++.animate({'color':+'red'},+400);
++},
++function()+{
++++$(this)
++++++.animate({'color':+'blue'},+400);
++}
);|4266296|demo|4266297|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/|1|http://jsbin.com/udahe3/2/edit^0|0|0|0|A|8|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@$K|14|L|15|1|16]]|A|$]]|$1|M|3|N|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|18|8|@]|9|@$K|19|L|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

Here is a solution without hack classes:

CSS:

<pre><code>a {color: blue;}
a:hover {color: red;}
</code></pre>

jQuery (uses <a href="http://jqueryui.com/" rel="noreferrer">jQueryUI</a> to animate color):

<pre><code>$('a').hover( 
 function() {
 $(this)
 .css('color','blue')
 .animate({'color': 'red'}, 400);
 },
 function() {
 $(this)
 .animate({'color': 'blue'}, 400);
 }
);
</code></pre>

<a href="http://jsbin.com/udahe3/2/edit" rel="noreferrer">demo</a>

blocks|key|3419505|text|我认为最好的方法是将:hover行为留给非javascript用户，然后使用JQuery创建mouseover和mouseout事件处理程序，为支持javascript的用户创建不同的效果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3419506|JQuery+Javascript+Library+-+Events/mouseover|3419507|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Events/mouseover^0|A|6|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

I think the best approach would be to leave the <code>:hover</code> behavior as a fall-back for non-javascript users and then use JQuery to create mouseover and mouseout event handlers to create a different effect for javascript-enabled users.

<a href="http://docs.jquery.com/Events/mouseover" rel="nofollow noreferrer">JQuery Javascript Library - Events/mouseover</a>

blocks|key|3419648|text|这是一个非常古老的问题，但我觉得有必要告诉大家，modernizr提供了一种很好的方法来实现这些退路。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3419649|只需在头中包含modernizr，您就可以这样做：|3419650|.no-js+a:hover+{
+++set+background+color+and+stuff+like+that
+++for+cases+when+no+javascript+is+present
}|code-block|syntax|javascript|3419651|另一方面，如果您想以另一种方式完成此操作，并且仅在存在js时设置css|3419652|.js+a:hover+{
+++set+background+color+to+default
+++and+the+text+decoration
}|3419653|这与在标记中添加鼠标悬停标签的解决方案大致相同，但更健壮。|3419654|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

It's a very old question but I feel the urge to tell that modernizr provides a very good way to implement these kind of fallbacks.

Just include modernizr in the head and you can do these:

<pre><code>.no-js a:hover {
 set background color and stuff like that
 for cases when no javascript is present
}
</code></pre>

On the other hand if you want to do this the other way and only set css when js is present

<pre><code>.js a:hover {
 set background color to default
 and the text decoration
}
</code></pre>

It is more or less the same solution as adding a hover tag to the markup, but a little more robust.

blocks|key|3419562|text|我找到了您的解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3419563|基本上，您可以从重新定义使用css悬停所做的事情开始。(当然，您可以通过动态地从样式中提取信息来完成此操作)，然后使用mouseover/mouseout事件在jquery中执行您想做的任何事情|3419564|这允许您将:hover事件保留在css中，因为jquery会将原始样式绑定到元素。实质上是禁用:hover事件。|3419565|如果css为：，则为|3419566|a.class+{
++background-color:+#000000;
++background-position:+0+0;
++}
a.class:hover+{
++background-color:+#ffffff;
++background-position:+100%25+-50px;
++}|code-block|syntax|javascript|3419567|你的jquery应该是这样的：|3419568|jQuery("a.class").each(function+()+{

++var+oldBackgroundColor+=+jQuery(this).css("backgroundColor");
++var+oldBackgroundPosition+=+jQuery(this).css("backgroundPosition");

++jQuery(".class").css({
++++++++'backgroundColor':oldBackgroundColor,
++++++++'backgroundPosition':oldBackgroundPosition
++});

})
.bind("mouseover",+function()+{

++doSomething();

})
.bind("mouseout",+function()+{

++doSomething();

})|3419569|entityMap^0|0|A|0|0|0|0|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|12|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|S|3|T|5|N|7|16|8|@]|D|@]|E|$O|P]]|$1|U|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|V|$]]

I HAVE FOUND YOUR SOLUTION

basically you start out by redefining what you did with the css hover.
(naturally you would do this by dynamically pulling the information from the style)
then do whatever you want to in jquery with mouseover/mouseout events

this allows you to keep the :hover event in your css because jquery is binding your original styles to the element. In essence disabling the :hover event.

if your css is:

<pre><code>a.class {
 background-color: #000000;
 background-position: 0 0;
 }
a.class:hover {
 background-color: #ffffff;
 background-position: 100% -50px;
 }
</code></pre>

your jquery would be somthing like:

<pre><code>jQuery("a.class").each(function () {

 var oldBackgroundColor = jQuery(this).css("backgroundColor");
 var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

 jQuery(".class").css({
 'backgroundColor':oldBackgroundColor,
 'backgroundPosition':oldBackgroundPosition
 });

})
.bind("mouseover", function() {

 doSomething();

})
.bind("mouseout", function() {

 doSomething();

})
</code></pre>

blocks|key|4266258|text|您可以通过使用单个css规则在整个文档中全局启用行为，然后在安装新的事件处理程序时，在javascript中的一条语句中禁用该规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4266259|在html+body标记中添加一个类：|4266260|<html>
++<body+class="use-hover">
++...|code-block|syntax|javascript|4266261|css中的默认行为，比如悬停时的粗体链接：|4266262|body.use-hover+a:hover
++font-weight:+bold|4266263|而在你的js中，当运行时，将删除默认行为，并做一些其他的事情：|4266264|$(function()+{
++$('body').removeClass('use-hover');
++$('a').live('mouseover',+function()+{
++++//+Do+something+when+hovered
++}).live('mouseout',+function()+{
++++//+Do+something+after+hover+is+lost
++});
});|4266265|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

You can globally enable behavior across the entire document by using a single css rule, and then disable that rule in one statement in javascript, while installing the new event handler.

Add a class to your html body tag:

<pre><code>&lt;html&gt;
 &lt;body class="use-hover"&gt;
 ...
</code></pre>

Default behavior in your css, let's say to bold links on hover:

<pre><code>body.use-hover a:hover
 font-weight: bold
</code></pre>

And in your js, when run will remove the default behavior and do something else:

<pre><code>$(function() {
 $('body').removeClass('use-hover');
 $('a').live('mouseover', function() {
 // Do something when hovered
 }).live('mouseout', function() {
 // Do something after hover is lost
 });
});
</code></pre>

blocks|key|202905|text|您可以从document.styleSheets中剥离所有:hover样式规则。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|202906|只需使用JavaScript浏览所有CSS样式，并删除所有在其选择器中包含":hover“的规则。当我需要从bootstrap+2中移除:hover样式时，我使用这个方法。|202907|_.each(document.styleSheets,+function+(sheet)+{+
++++var+rulesToLoose+=+[];+
++++_.each(sheet.cssRules,+function+(rule,+index)+{+
++++++++if+(rule.selectorText+&&+rule.selectorText.indexOf(':hover')+>+0)+{+
++++++++++++rulesToLoose.push(index);
++++++++}
++++});

++++_.each(rulesToLoose.reverse(),+function+(index)+{
++++++++if+(sheet.deleteRule)+{
++++++++++++sheet.deleteRule(index);
++++++++}+else+if+(sheet.removeRule)+{
++++++++++++sheet.removeRule(index);
++++++++}
++++});
});|code-block|syntax|javascript|202908|我确实使用了下划线来迭代数组，但也可以使用纯js循环来编写它们：|202909|for+(var+i+=+0;+i+<+document.styleSheets.length;+i%2B%2B)+{}|202910|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

You could strip all :hover style rules from document.styleSheets.

Just go through all CSS styles with JavaScript and remove all rules, which contain ":hover" in their selector. I use this method when I need to remove :hover styles from bootstrap 2.

<pre><code>_.each(document.styleSheets, function (sheet) { 
 var rulesToLoose = []; 
 _.each(sheet.cssRules, function (rule, index) { 
 if (rule.selectorText &amp;&amp; rule.selectorText.indexOf(':hover') &gt; 0) { 
 rulesToLoose.push(index);
 }
 });

 _.each(rulesToLoose.reverse(), function (index) {
 if (sheet.deleteRule) {
 sheet.deleteRule(index);
 } else if (sheet.removeRule) {
 sheet.removeRule(index);
 }
 });
});
</code></pre>

I did use underscore for iterating arrays, but one could write those with pure js loop as well:

<pre><code>for (var i = 0; i &lt; document.styleSheets.length; i++) {}
</code></pre>

blocks|key|202912|text|You+can+redraw+element+after+click
function+redraw(element)+{
if+(!element)+{+return;+}

let+n+=+document.createTextNode('+');
let+disp+=+element.style.display;++//+don't+worry+about+previous+display+style

element.appendChild(n);
element.style.display+=+'none';

setTimeout(function(){
++++element.style.display+=+disp;
++++n.parentNode.removeChild(n);
},+100);+//+you+can+play+with+this+timeout+to+make+it+as+short+as+possible|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|202913|}|unstyled|202914|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>You can redraw element after click
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display; // don't worry about previous display style

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
 element.style.display = disp;
 n.parentNode.removeChild(n);
}, 100); // you can play with this timeout to make it as short as possible
</code></pre>

}

I have a small problem with a script. 
I want to have a default action on <code>:hover</code> for clients with Javascript disabled, but for those with Javascript enabled I want another action (actually... same action, but I want to add a small transition effect).

So... How can I do this? I am using jQuery.

How do I remove :hover?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我有一个关于脚本的小问题。我想在:hover上为禁用了Javascript的客户端提供一个默认操作，但对于那些启用了Javascript的客户端，我想要另一个操作(实际上...相同的动作，但我想添加一个小的过渡效果)。所以..。我该怎么做呢？我正在使用jQuery。

问如何删除:hover？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除:hover？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何删除:hover？
EN