什么是:hover的相反效果（鼠标离开时）？

Question

有没有仅使用CSS实现:hover相反效果的方法？ 例如：:hover是鼠标进入，是否有CSS等效的鼠标离开？

示例：

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

jsFiddle

（请注意，我不只希望回答此示例，而是整个“:hover相反效果”问题。）

- Cthulhu

---

你到底想做什么？也许有其他的替代方案？ - Moin Zaman

:hover的相反操作就是:not(:hover)，但是:hover并不等同于onmouseenter，:not(:hover)也不等同于onmouseleave。CSS没有DOM事件的概念。 - BoltClock

@Cthulhu: :hover 简单地意味着“鼠标指针悬停在元素上”。它并不表示鼠标指针是否从另一个元素转移到此元素。它只是表示鼠标指针当前位于该元素上。 - BoltClock

@BoltClock :not(:hover) 实际上会做什么？它会被触发吗？ - Moin Zaman

@Moin Zaman：是的。只要你的鼠标不悬停在特定元素上，:not(:hover) 就会生效。这里有一个演示：http://jsfiddle.net/BoltClock/rghBX - BoltClock

Answer 1

如果我理解正确，你可以通过将过渡效果移到链接上而不是悬停状态来完成相同的事情：

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选择器用于在鼠标悬停在元素上方时选择元素。

按照这个定义，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;
}

- SpaceBeers

---

（请注意，我不仅希望回答这个例子，而是整个“相反于:hover”的问题。） - Cthulhu

@Cthulhu - 我现在已经编辑了我的答案。这可能会更有帮助。我认为那个答案太明显了。 - SpaceBeers

+1因为指导我朝着正确的方向。我在浏览器之间存在一个动画差异。Chrome渲染一切更加平滑，但我的转换时间有0.1秒的差异，Mozilla和IE都显示错误。通过匹配我的转换数字，我成功解决了问题。 - Termato

唉，你引用的:hover“定义”来自W3Schools，他们并不是权威来源。实际规范可以在http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes找到，尽管它不是最易于理解的解释。 - Mark Amery

Answer 2

相反的方法是使用:not

例如：

selection:not(:hover) { rules }

- Jared Wilber

---

为什么这不是被接受的答案？这完全就是提问者所问的！ - Bruno Brant

这是我非常想要的东西。 <3 - Harish

多好的答案啊，我之前在鼠标悬停时尝试将颜色与 div 的背景图混合，但是在鼠标移开时没有得到动画效果。现在我使用这个答案再次将白色混合到背景图中，巧妙地利用了 CSS。 - Ahmed Ali

这是正确的答案!! 谢谢!! - ssdar

让这个答案为大家所知！！ - Amos Machora

Answer 3

使用CSS过渡效果代替动画。

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

A:hover {
    color: #000;
}

演示版

- Marat Tanalin

---

就像我在例子中所说的那样，我的问题不在于动画，而是在于“鼠标离开”部分。 - Cthulhu

过渡效果可以在鼠标悬停和鼠标离开时都起作用。只需为普通状态和 :hover 状态指定样式即可。 - Marat Tanalin

当网页加载时，如何在瞬间停止过渡效果？ - Cloud Walker

@CloudWalker，不确定你的意思。转换无法停止，在选择器不再匹配时会回滚。 - Marat Tanalin

例如，如果您在文本颜色上有一个从黑色到白色的过渡效果，那么文本加载的瞬间，它会从白色变成黑色（持续时间与过渡持续时间相同）。不确定这是否是我的问题。 - Cloud Walker

@CloudWalker，你是在谈论我的现场演示还是你自己的情况？如果是前者，我无法重现这个问题：转换在页面加载时没有被触发。如果是后者，你的页面可能会在页面加载时应用一些涉及转换的样式（例如通过添加类）。 - Marat Tanalin

Answer 4

将持续时间放入非悬停选择中：

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

li a:hover {
  padding:19px;
}

- Hassan Mahmoud

---

在我的情况下，这很有帮助。它会过渡回默认值。 - Norbert

Answer 5

只需将过渡效果添加到您正在操作的元素中即可。请注意，页面加载时可能会出现一些效果。例如，如果您更改了边框半径，您将在dom加载时看到它。

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

- José Rasmussen

Answer 6

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

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

我认为您需要考虑一个JS / jQuery解决方案。

- Moin Zaman

---

在这种情况下不需要使用JS，我现在会反对它，尽管有性能方面的理由。 - Alex Chamberlain

上面的例子不需要它，但它似乎是整个“鼠标离开”问题的最佳解决方案。 - Cthulhu

Answer 7

只需在初始类上添加过渡和动画名称，对于您的情况，ul li a，只需添加“transition”属性即可。

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>

- Stock Dave

Answer 8

使用 transition 的另一种方式就是仅仅指定毫秒数，像这样：transition: 500ms;

尝试下面的代码片段

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

<div>HOVER ME</div>

- Gass

Answer 9

你可以使用CSS3过渡效果。

一些好的链接：

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

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

- SVS

Answer 10

当鼠标悬停在 .icon 元素上时，这会为其添加背景颜色，并且鼠标指针离开元素时背景会逐渐消失。

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

- mike_s