鼠标悬停(鼠标离开)的反义词是什么？

有没有办法做相反的 :hover 只使用 CSS？例如: 如果 :hover是 on Mouse Enter，那么是否存在与 on Mouse Leave等价的 CSS？

例如:

我有一个使用列表项的 HTML 菜单。当我悬停其中一个项目时，有一个从 #999到 black的 CSS 彩色动画。如何创建相反的效果时，鼠标离开项目区域，与动画从 black到 #999？

JsFiddle

(请记住，我不希望只回答这个例子，而是整个“ :hover的反面”问题。)

310215 次浏览
小开

在 CSS 中没有显式的鼠标离开属性。

您可以使用: 鼠标悬停在所有其他元素上，除了有问题的项目，以实现这一效果。但是我不确定这样做有多实际。

我认为您必须考虑 JS/jQuery 解决方案。

小开

使用 CSS 转场代替动画。

A {
color: #999;
transition: color 1s ease-in-out;
}


A:hover {
color: #000;
}

现场演示

小开

您误解了 :hover; 它说鼠标位于一个项目上方，而不是鼠标刚刚输入该项目。

您可以添加动画到选择器没有 :hover实现您想要的效果。

过渡是一个更好的选择: http://jsfiddle.net/Cvx96/

小开
最佳答案

如果我理解正确的话，你可以通过移动你的转场到链接而不是悬停状态来做同样的事情:

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;
}

Http://jsfiddle.net/spacebeers/selku/3/

悬停的定义是:

鼠标悬停选择器用于在鼠标悬停时选择元素 他们。

根据这个定义，悬停的对立面是鼠标在其上方的任何点。一个比我聪明得多的人写了这篇文章，在两个状态上设置了不同的转换—— http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#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;
}
小开

你可以使用 CSS3转换

一些好的链接:

Http://css-tricks.com/different-transitions-for-hover-on-hover-off/

Http://www.alistapart.com/articles/understanding-css3-transitions/

小开

与 :hover相反的似乎是 :link。

(编辑: 技术上不是相反的，因为有4个选择器 :link，:visited，:hover和 :active。如果你包括 :focus,5。)

例如，当定义规则 .button:hover{ text-decoration:none }以删除按钮上的下划线时，在某些浏览器中滚动按钮时会显示下划线。我用 .button:hover, .button:link{ text-decoration:none }修好了

当然，这只适用于实际上是链接的元素(have href 属性)

小开

虽然这里的答案已经足够了，但是我真的认为 W3学校在这个问题上的例子非常简单(它马上解决了我的困惑)。

使用 :hover选择器在移动时更改按钮的样式 老鼠在上面。

提示: 使用转换-持续时间属性确定 “盘旋”效应:

例子

.button {
-webkit-transition-duration: 0.4s; /* Safari & Chrome */
transition-duration: 0.4s;
}


.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}

总之，对于希望“输入”和“退出”动画相同的转换，需要在主选择器 .button而不是悬停选择器 .button:hover上使用转换。对于希望“输入”和“退出”动画不同的转换，需要指定不同的主选择器和悬停选择器转换。

小开

把你的持续时间放在非悬停选项中:

li a {
background-color: #111;
transition:1s;
}


li a:hover {
padding:19px;
}
小开

只需要在类的初始化上添加一个转换和动画的名称，在您的例子中，ul li a，只需要添加一个“转换”属性，这就是您所需要的全部

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;
}
}
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
</ul>

小开

只需向您正在干扰的元素添加一个过渡即可。请注意，加载页面时可能会有一些效果。如果你改变边界半径，你会看到它时，多姆加载。

.element {
width: 100px;
transition: all ease-in-out 0.5s;
}
 

.element:hover {
width: 200px;
transition: all ease-in-out 0.5s;
}

小开

相反的是使用 :not

e.g.

selection:not(:hover) { rules }

小开

使用 transition的另一种方法是像这样指定 毫秒: transition: 500ms;

请尝试下面的代码片段

div{
background: DeepSkyBlue;
width:150px;
height:100px;
transition: 500ms;
}
div:hover{
opacity: 0.5;
cursor:pointer;
}
<div>HOVER ME</div>

小开

这将添加背景颜色的 .icon时，悬停和背景褪色时，鼠标指针离开元素。

.icon {
transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
background-color: rgba(169, 169, 169, 0.9);
}

提交答案