:hover （鼠标离开时）的反义词是什么？

Question

有什么方法可以与:hover 仅使用 CSS 做相反的事情吗？如：如果:hover 是on Mouse Enter，是否有等效于on Mouse Leave 的CSS？

例子：

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

jsFiddle

（请记住，我不想只回答这个例子，而是整个“与:hover相反”的问题。）

Answer 1

没有，CSS 中没有明确的鼠标离开属性。

您可以使用 :hover 在除相关项目之外的所有其他元素上来实现此效果。但我不确定这会有多实用。

我认为您必须查看 JS / jQuery 解决方案。

Answer 2

只需使用CSS transitions 而不是动画。

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

A:hover {
    color: #000;
}

Live demo

Answer 3

你误会了:hover；它表示鼠标在一个项目上，而不是鼠标刚刚进入该项目。

你可以在没有:hover的情况下给选择器添加动画来达到你想要的效果。

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

Answer 4

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

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/

hover的定义是：

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

根据该定义，悬停的反义词是鼠标不在其上方的任何点。比我聪明得多的人写了这篇文章，在两种状态下都设置了不同的转换 - 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;
}

Answer 5

你可以使用 CSS3 过渡

一些不错的链接：

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

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

Answer 6

:hover 的反义词似乎是 :link。

（编辑：技术上不是相反的，因为有 4 个选择器 :link、:visited、:hover 和 :active。如果包括 :focus，则有五个。）

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

这当然只适用于实际上是链接的元素（具有 href 属性）

Answer 7

虽然这里的答案已经足够了，但我真的认为W3Schools 这个问题上的例子非常简单（它立即消除了困惑（对我来说））。

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

提示：使用transition-duration属性来确定速度 “悬停”效果：

例子

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

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

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

Answer 8

将您的持续时间放在非悬停选择中：

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

li a:hover {
  padding:19px;
}

Answer 9

只需在类初始添加一个过渡和动画的名称，在你的情况下，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>

Answer 10

只需为您正在处理的元素添加一个过渡。请注意，页面加载时可能会产生一些影响。就像您更改了边框半径一样，您会在 dom 加载时看到它。

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

Answer 11

相反的是使用:not

例如

selection:not(:hover) { rules }