blocks|key|1397802|text|hover的问题是IE6只在链接上支持它。这些天我使用jQuery来做这类事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397803|$("div+input").hover(function()+{
++$(this).addClass("blue");
},+function()+{
++$(this).removeClass("blue");
});|code-block|syntax|javascript|1397804|让事情变得简单多了。这将适用于IE6，FF，Chrome和Safari。|1397805|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The problem with :hover is that IE6 only supports it on links. I use jQuery for this kind of thing these days:

<pre><code>$("div input").hover(function() {
 $(this).addClass("blue");
}, function() {
 $(this).removeClass("blue");
});
</code></pre>

Makes things a lot easier. That'll work in IE6, FF, Chrome and Safari.

blocks|key|1397656|text|CSS+one更具可维护性和可读性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397657|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The CSS one is much more maintainable and readable.

blocks|key|1398135|text|在javascript中这样做的另一个好处是你可以在不同的时间点添加/删除悬停效果-例如，将鼠标悬停在表行上会改变颜色，单击会禁用悬停效果并开始原地编辑模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398136|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

One additional benefit to doing it in javascript is you can add / remove the hover effect at different points in time - e.g. hover over table rows changes color, click disables the hover effect and starts edit in place mode.

blocks|key|1398181|text|为什么不两者兼得呢？使用jQuery实现动画效果，使用CSS作为后备。这为您提供了使用graceful+degradation的jQuery的好处。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1398182|CSS：|1398183|a+{color:+blue;}
a:hover+{color:+red;}|code-block|syntax|javascript|1398184|jQuery+(使用jQueryUI设置颜色动画)：|1398185|$('a').hover(+
++function()+{
++++$(this)
++++++.css('color','blue')
++++++.animate({'color':+'red'},+400);
++},
++function()+{
++++$(this)
++++++.animate({'color':+'blue'},+400);
++}
);|1398186|demo|1398187|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Graceful_degradation|1|http://jqueryui.com/|2|http://jsbin.com/aqocuy/2/edit^0|17|K|0|0|0|0|A|8|1|0|0|0|4|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|M|3|N|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

Why not both? Use jQuery for animated effects and CSS as the fallback. This gives you the benefits of jQuery with <a href="http://en.wikipedia.org/wiki/Graceful_degradation" rel="noreferrer">graceful degradation</a>.

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/aqocuy/2/edit" rel="noreferrer">demo</a>

blocks|key|1397906|text|编辑:这个答案不再成立。CSS得到了很好的支持，javascript+(阅读:+JScript)现在对于任何网络体验来说都是非常必要的，很少有人会禁用Javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397907|最初的答案，正如我在2009年的观点。|1397908|在我的脑海中：|1397909|使用CSS时，您可能会遇到浏览器支持方面的问题。|1397910|使用JScript，人们可以禁用jscript+(这就是我要做的)。|1397911|我认为最好的方法是用HTML做内容，用CSS做布局，用JScript做任何动态的事情。因此，在这种情况下，您可能希望采用CSS方法。|1397912|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

EDIT: This answer no longer holds true. CSS is well supportedand Javascript (read: JScript) is now pretty much required for any web experience, and few folks disable javascript.

The original answer, as my opinion in 2009.

Off the top of my head: 

With CSS, you may have issues with browser support. 

With JScript, people can disable jscript (thats what I do).

I believe the preferred method is to do content in HTML, Layout with CSS, and anything dynamic in JScript. So in this instance, you would probably want to take the CSS approach.

blocks|key|1398313|text|一个非常大的区别是，当鼠标移出元素时，":hover“状态会自动停用。因此，在悬停时应用的任何样式都会自动反转。另一方面，使用javascript方法，您必须同时定义"onmouseover“和"onmouseout”事件。如果你只定义了"onmouseover“，除非你已经明确定义了"onmouseout”，否则应用"onmouseover“的样式即使在鼠标移出之后也会一直存在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398314|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

A very big difference is that ":hover" state is automatically deactivated when the mouse moves out of the element. As a result any styles that are applied on hover are automatically reversed.
On the other hand, with the javascript approach, you would have to define both "onmouseover" and "onmouseout" events. If you only define "onmouseover" the styles that are applied "onmouseover" will persist even after you mouse out unless you have explicitly defined "onmouseout".

blocks|key|1398248|text|在Internet+Explorer中，必须声明一个才能使:hover选择器在该元素以外的其他元素上工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398249|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In Internet Explorer, there must be declared a &lt;!DOCTYPE> for the :hover selector to work on other elements than the &lt;a> element.

blocks|key|1397712|text|使用CSS，它使得样式本身的管理变得更容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397713|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Use CSS, it makes for much easier management of the style itself.

blocks|key|1398028|text|在using+jQuery+to+do+hover中，我总是使用插件HoverIntent，因为它不会触发事件，直到你在一个元素上暂停一小段时间……如果您不小心将鼠标放在事件上，或者只是在选择一个选项时，这会停止触发大量鼠标经过事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1398029|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover/608793#608793|1|http://cherne.net/brian/resources/jquery.hoverIntent.html^0|1|O|0|Y|B|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

In reguards to <a href="https://stackoverflow.com/questions/608788/css-hover-vs-javascript-mouseover/608793#608793">using jQuery to do hover</a>, I always use the plugin <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="nofollow noreferrer">HoverIntent</a> as it doesn't fire the event until you pause over an element for brief period of time... this stops firing off lots of mouse over events if you accidentally run the mouse over them or simply whilst choosing an option.

blocks|key|1612624|text|如果你不需要100%25支持禁用javascript的IE6，你可以使用类似ie7-js的IE条件注释。然后，您只需使用css规则来应用悬停效果。我不知道它到底是如何工作的，但它使用javascript使许多css规则在IE7和8中不能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1612625|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/ie7-js/^0|10|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you don't need 100% support for IE6 with javascript disabled you could use something like <a href="http://code.google.com/p/ie7-js/" rel="nofollow noreferrer">ie7-js</a> with IE conditional comments. Then you just use css rules to apply hover effects. I don't know exactly how it works but it uses javascript to make a lot of css rules work that don't normally in IE7 and 8.

There are times when I have a choice between using a CSS element:hover or JavaScript onmouseover to control the appearance of html elements on a page. Consider the following scenario where a div wraps an input

<pre><code>&lt;div&gt;
&lt;input id="input"&gt;
&lt;/div&gt;
</code></pre>

I want the input to change background color when the mouse cursor hovers over the div. The CSS approach is

<pre><code>&lt;style&gt;
 input {background-color:White;}
 div:hover input {background-color:Blue;}
&lt;/style&gt;

&lt;div&gt;&lt;input&gt;&lt;/div&gt;
</code></pre>

The JavaScript approach is

<pre><code>&lt;div onmouseover="document.getElementById('input').style.backgroundColor='Blue';"&gt;
 &lt;input id="input"&gt;
&lt;/div&gt;
</code></pre>

What are the advantages and disadvantages of each approach? Does the CSS approach work well with most web browsers? Is JavaScript slower than css?

CSS hover vs. JavaScript mouseover

jQuery

有时候，我可以选择使用CSS元素:hover或JavaScript onmouseover来控制页面上html元素的外观。考虑以下场景，其中div包装输入<div><input id="input"></div>当鼠标光标悬停在div上时，我希望输入改变背景颜色。CSS方法是<style> input {background-color:White;} div:hover input {bac

问CSS鼠标悬停与JavaScript鼠标悬停
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS鼠标悬停与JavaScript鼠标悬停EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS鼠标悬停与JavaScript鼠标悬停
EN