142

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

例子：

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

jsFiddle

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

4

11 回答 11

114

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

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

根据该定义，悬停的反义词是鼠标不在其上方的任何点。比我聪明得多的人完成了这篇文章，在两种状态下设置了不同的转换 - 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;
}
于 2012-06-12T10:57:41.683 回答
33

只需使用CSS 过渡而不是动画。

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

A:hover {
    color: #000;
}

现场演示

于 2012-06-12T10:52:54.143 回答
32

相反是使用:not

例如

selection:not(:hover) { rules }

于 2021-02-13T00:04:53.710 回答
4

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

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

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

于 2012-06-12T10:52:04.987 回答
4

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

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

li a:hover {
  padding:19px;
}
于 2019-08-25T15:42:04.423 回答
3

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

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

于 2020-02-09T14:29:27.180 回答
2

您可以使用 CSS3 过渡

一些很好的链接：

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

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

于 2012-06-12T11:00:49.867 回答
1

虽然这里的答案已经足够了，但我真的认为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。对于您希望“进入”和“退出”动画不同的过渡，您需要指定不同的主选择器和悬停选择器过渡。

于 2016-09-28T04:37:01.270 回答
1

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

于 2019-11-06T16:39:30.047 回答
0

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

您可以将动画添加到选择器而不:hover达到您想要的效果。

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

于 2012-06-12T10:56:42.820 回答
0

的反面:hover似乎是:link。

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

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

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

于 2015-07-07T02:42:20.053 回答