blocks|key|2878044|text|不，CSS中没有鼠标离开的显式属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2878045|您可以使用:hover在除所讨论的项目之外的所有其他元素上实现此效果。但我不确定这是否可行。|2878046|我认为您必须考虑JS+/+jQuery解决方案。|2878047|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

No there is no explicit property for mouse leave in CSS. 

You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be. 

I think you have to look at a JS / jQuery solution.

blocks|key|2878054|text|只需使用CSS+transitions而不是动画。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2878055|A+{
++++color:+#999;
++++transition:+color+1s+ease-in-out;
}

A:hover+{
++++color:+#000;
}|code-block|syntax|javascript|2878056|Live+demo|2878057|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions|1|http://jsfiddle.net/SZqkb/66/^0|4|F|0|0|0|0|9|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

Just use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions" rel="noreferrer">CSS transitions</a> instead of animations.

<pre class="lang-css prettyprint-override"><code>A {
 color: #999;
 transition: color 1s ease-in-out;
}

A:hover {
 color: #000;
}
</code></pre>

<a href="http://jsfiddle.net/SZqkb/66/" rel="noreferrer">Live demo</a>

blocks|key|227101|text|您误解了:hover；它说鼠标在项目上，而不是鼠标刚进入项目。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|227102|可以在不使用:hover的情况下将动画添加到选择器中，以获得所需的效果。|227103|转换是一个更好的选择：http://jsfiddle.net/Cvx96/|227104|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Cvx96/^0|4|6|0|6|6|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

You have misunderstood <code>:hover</code>; it says the mouse is over an item, rather than the mouse has just entered the item.

You could add animation to the selector without <code>:hover</code> to achieve the effect you want.

Transitions is a better option: <a href="http://jsfiddle.net/Cvx96/" rel="nofollow">http://jsfiddle.net/Cvx96/</a>

blocks|key|224882|text|如果我理解正确的话，您可以通过将过渡移动到链接而不是悬停状态来做同样的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224883|ul+li+a+{
++++color:#999;+++++++
++++transition:+color+0.5s+linear;+/*+vendorless+fallback+*/
++++-o-transition:+color+0.5s+linear;+/*+opera+*/
++++-ms-transition:+color+0.5s+linear;+/*+IE+10+*/
++++-moz-transition:+color+0.5s+linear;+/*+Firefox+*/
++++-webkit-transition:+color+0.5s+linear;+/*safari+and+chrome+*/
}

ul+li+a:hover+{
++++color:black;
++++cursor:+pointer;
}|code-block|syntax|javascript|224884|http://jsfiddle.net/spacebeers/sELKu/3/|offset|length|224885|悬停的定义是：|224886|224887|+:hover选择器用于在将鼠标悬停在元素上时选择这些元素。|blockquote|224888|224889|224890|根据这个定义，鼠标悬停的对立面是鼠标悬停而不是悬停()的任何点。比我聪明得多的人完成了这篇文章，在两种状态上设置了不同的转换--+http://css-tricks.com/different-transitions-for-hover-on-hover-off/|style|BOLD|224891|#thing+{
+++padding:+10px;
+++border-radius:+5px;

++/*+HOVER+OFF+*/
+++-webkit-transition:+padding+2s;
}

#thing:hover+{
+++padding:+20px;
+++border-radius:+15px;

++/*+HOVER+ON+*/
+++-webkit-transition:+border-radius+2s;
}|224892|entityMap|0|LINK|mutability|MUTABLE|url|1|http://css-tricks.com/different-transitions-for-hover-on-hover-off/^0|0|0|0|13|0|0|0|0|0|0|0|Q|2Y|1T|1V|1|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1I|8|@$I|1J|J|1K|U|V]]|9|@$I|1L|J|1M|1|1N]]|A|$]]|$1|W|3|X|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|H]]|15|$5|11|12|13|A|$14|16]]]]

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

<pre><code>ul li a {
 color:#999; 
 transition: color 0.5s linear; /* vendorless fallback */
 -o-transition: color 0.5s linear; /* opera */
 -ms-transition: color 0.5s linear; /* IE 10 */
 -moz-transition: color 0.5s linear; /* Firefox */
 -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
 color:black;
 cursor: pointer;
}
</code></pre>

<a href="http://jsfiddle.net/spacebeers/sELKu/3/" rel="noreferrer">http://jsfiddle.net/spacebeers/sELKu/3/</a>

The definition of hover is:

<blockquote>
 The :hover selector is used to select elements when you mouse over
 them.
</blockquote>

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - <a href="http://css-tricks.com/different-transitions-for-hover-on-hover-off/" rel="noreferrer">http://css-tricks.com/different-transitions-for-hover-on-hover-off/</a>

<pre><code>#thing {
 padding: 10px;
 border-radius: 5px;

 /* HOVER OFF */
 -webkit-transition: padding 2s;
}

#thing:hover {
 padding: 20px;
 border-radius: 15px;

 /* HOVER ON */
 -webkit-transition: border-radius 2s;
}
</code></pre>

blocks|key|221797|text|您可以使用CSS3转换|type|unstyled|depth|inlineStyleRanges|entityRanges|data|221798|一些不错的链接：|offset|length|style|BOLD|221799|http://css-tricks.com/different-transitions-for-hover-on-hover-off/|221800|http://www.alistapart.com/articles/understanding-css3-transitions/|221801|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|8|0|0|1V|0|0|0|1U|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|L|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|I]]|S|$5|O|P|Q|A|$R|K]]]]

You can use CSS3 transition 

Some good links:

<a href="http://css-tricks.com/different-transitions-for-hover-on-hover-off/" rel="nofollow">http://css-tricks.com/different-transitions-for-hover-on-hover-off/</a>

<a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="nofollow">http://www.alistapart.com/articles/understanding-css3-transitions/</a>

blocks|key|2878142|text|与:hover相反的似乎是:link。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2878143|(编辑:从技术上讲不是相反的，因为有4个选择器:link，:visited，:hover和:active。如果包括:focus，则为五个。)|2878144|例如，在定义规则.button:hover{+text-decoration:none+}以删除按钮上的下划线时，在某些浏览器中滚动按钮时会显示下划线。我已经用.button:hover,+.button:link{+text-decoration:none+}修复了这个问题|2878145|当然，这只适用于实际是链接的元素(具有href属性)|2878146|entityMap^0|1|6|D|5|0|N|5|T|8|12|6|19|7|1L|6|0|8|11|28|1F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|M|$]]

The opposite of <code>:hover</code> appears to be <code>:link</code>. 

(edit: not technically an opposite because there are 4 selectors <code>:link</code>, <code>:visited</code>, <code>:hover</code> and <code>:active</code>. Five if you include <code>:focus</code>.)

For example when defining a rule <code>.button:hover{ text-decoration:none }</code> to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with <code>.button:hover, .button:link{ text-decoration:none }</code>

This of course only works for elements that are actually links (have href attribute)

blocks|key|221817|text|虽然这里的答案已经足够了，但我真的认为这个问题上的W3Schools示例是非常简单的(它立即消除了(我)的困惑)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|221818|221819|当您将鼠标移到按钮上时，可以使用:hover选择器更改按钮的样式。|blockquote|style|CODE|221820|221821|提示：使用transition-duration属性来确定“悬停”效果的速度：|BOLD|221822|示例|221823|.button+{-webkit-转换持续时间:+0.4s；/*+Safari+&+Chrome+*/转换持续时间:+0.4s；}+.button:hover+{背景颜色：#4CAF50；/*绿色*/颜色:白色；}|221824|221825|总之，对于您希望"enter“和"exit”动画相同的过渡，您需要在主选择器.button而不是悬停选择器.button:hover上使用过渡。对于希望"enter“和"exit”动画不同的过渡，需要指定不同的主选择器和悬停选择器过渡。|221826|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/css3_buttons.asp^0|P|9|0|0|0|G|6|0|0|0|3|0|0|0|0|12|7|1H|D|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|17|8|@$A|18|B|19|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1B|8|@$A|1C|B|1D|H|M]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1E|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1F|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1H|8|@$A|1I|B|1J|H|I]|$A|1K|B|1L|H|I]]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

Although answers here are sufficient, I really think <a href="http://www.w3schools.com/css/css3_buttons.asp" rel="nofollow">W3Schools</a> example on this issue is very straightforward (it cleared up the confusion (for me) right away).

<blockquote>
 Use the <code>:hover</code> selector to change the style of a button when you move
 the mouse over it.
 
 Tip: Use the transition-duration property to determine the speed of
 the "hover" effect:
 
 Example

<pre><code>.button {
 -webkit-transition-duration: 0.4s; /* Safari &amp; Chrome */
 transition-duration: 0.4s;
}

.button:hover {
 background-color: #4CAF50; /* Green */
 color: white;
}
</code></pre>
</blockquote>

In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector <code>.button</code> rather than the hover selector <code>.button:hover</code>. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.

blocks|key|227171|text|将持续时间放在非悬停选项中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|227172|li+a+{
++background-color:+#111;
++transition:1s;
}

li+a:hover+{
++padding:19px;
}|code-block|syntax|javascript|227173|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Put your duration time in the non-hover selection:

<pre><code>li a {
 background-color: #111;
 transition:1s;
}

li a:hover {
 padding:19px;
}
</code></pre>

blocks|key|2878192|text|只需在inicial类上添加一个过渡和动画的名称，在本例中为ul+li+a，只需添加一个"+transition“属性，这就是您需要的全部内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2878193|​|2878194|ul+li+{
++++display:+inline;
++++margin-left:+20px;
}

ul+li+a+{
++++color:+#999;
++++transition:+1s;
++++-webkit-animation:+item-hover-off+1s;
++++-moz-animation:+item-hover-off+1s;
++++animation:+item-hover-off+1s;
}

ul+li+a:hover+{
++++color:+black;
++++cursor:+pointer;
++++-webkit-animation:+item-hover+1s;
++++-moz-animation:+item-hover+1s;
++++animation:+item-hover+1s;
}

@keyframes+item-hover+{
++++from+{
++++++color:+#999;
++++++}
++++to+{
++++++color:+black;
++++++}
}
++++
@-moz-keyframes+item-hover+{
++++from+{
++++++++color:+#999;
++++++}
++++to+{
++++++++color:+black;
++++++}
}
++++
@-webkit-keyframes+item-hover+{
++++from+{
++++++++color:+#999;
++++++}
++++to+{
++++++++color:+black;
++++++}
}

@keyframes+item-hover-off+{
++++from+{
++++++color:+black;
++++++}
++++to+{
++++++color:+#999;
++++++}
}
++++
@-moz-keyframes+item-hover-off+{
++++from+{
++++++++color:+black;
++++++}
++++to+{
++++++++color:+#999;
++++++}
}
++++
@-webkit-keyframes+item-hover-off+{
++++from+{
++++++++color:+black;
++++++}
++++to+{
++++++++color:+#999;
++++++}
}|code-block|syntax|javascript|2878195|<ul>
++++<li><a>Home</a></li>
++++<li><a>About</a></li>
++++<li><a>Contacts</a></li>
</ul>|2878196|2878197|entityMap^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|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need 

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul li {
 display: inline;
 margin-left: 20px;
}

ul li a {
 color: #999;
 transition: 1s;
 -webkit-animation: item-hover-off 1s;
 -moz-animation: item-hover-off 1s;
 animation: item-hover-off 1s;
}

ul li a:hover {
 color: black;
 cursor: pointer;
 -webkit-animation: item-hover 1s;
 -moz-animation: item-hover 1s;
 animation: item-hover 1s;
}

@keyframes item-hover {
 from {
 color: #999;
 }
 to {
 color: black;
 }
}
 
@-moz-keyframes item-hover {
 from {
 color: #999;
 }
 to {
 color: black;
 }
}
 
@-webkit-keyframes item-hover {
 from {
 color: #999;
 }
 to {
 color: black;
 }
}

@keyframes item-hover-off {
 from {
 color: black;
 }
 to {
 color: #999;
 }
}
 
@-moz-keyframes item-hover-off {
 from {
 color: black;
 }
 to {
 color: #999;
 }
}
 
@-webkit-keyframes item-hover-off {
 from {
 color: black;
 }
 to {
 color: #999;
 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
 &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a&gt;About&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a&gt;Contacts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>

blocks|key|3092138|text|只需向您正在处理的元素添加一个过渡即可。请注意，页面加载时可能会有一些影响。例如，如果您更改了边界半径，当dom加载时，您将看到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3092139|​|3092140|.element+{
++width:+100px;
++transition:+all+ease-in-out+0.5s;
}
+
+.element:hover+{
++width:+200px;
++++transition:+all+ease-in-out+0.5s;
}|code-block|syntax|javascript|3092141|3092142|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.element {
 width: 100px;
 transition: all ease-in-out 0.5s;
}
 
 .element:hover {
 width: 200px;
 transition: all ease-in-out 0.5s;
}</code></pre>
</div>
</div>

blocks|key|3092171|text|相反的是使用:not|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3092172|例如：|3092173|selection:not(:hover)+{+rules+}|3092174|entityMap^0|6|4|0|0|0|V|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

The opposite is using <code>:not</code>
e.g.
<code>selection:not(:hover) { rules } </code>

Is there any way to do the opposite of <code>:hover</code> using only CSS? As in: if <code>:hover</code> is <code>on Mouse Enter</code>, is there a CSS equivalent to <code>on Mouse Leave</code>?

Example:

I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from <code>#999</code> to <code>black</code>. How can I create the opposite effect when the mouse leaves the item area, with an animation from <code>black</code> to <code>#999</code>?

<a href="http://jsfiddle.net/Cthulhu/SZqkb/">jsFiddle</a>

(Have in mind that I do not wish to answer only this example, but the entire "opposite of <code>:hover</code>" issue.)

What is the opposite of :hover (on mouse leave)?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有办法与:hover 相反，只使用 CSS？如下所示:如果:hover为on Mouse Enter，是否存在与on Mouse Leave等效的CSS示例：我有一个使用列表项的HTML菜单。当我将鼠标悬停在其中一个项目上时，会出现从#999到black的CSS颜色动画。当鼠标离开项目区域时，如何使用从black到...

问鼠标悬停(鼠标左键)的对立面是什么？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标悬停(鼠标左键)的对立面是什么？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标悬停(鼠标左键)的对立面是什么？
EN