如何扭转 CSS :hover 的效果？-css教程-PHP中文网

如何扭转 CSS :hover 的效果？

Mary-Kate Olsen

发布： 2024-12-16 03:52:10

原创

233 人浏览过

How Can I Reverse the Effects of CSS :hover?

使用 CSS 反转 :hover 的效果

:hover 伪类允许开发人员在鼠标指针移动时将特定样式应用于元素盘旋在他们上方。然而，通常需要为鼠标离开元素时的实例定义对比效果。

是否有 CSS 替代 :hover 在鼠标离开时触发？

为了实现与 :hover 相反的效果（在鼠标输入时激活），必须记住悬停的定义：它在鼠标经过元素时选择元素。因此，要扭转这种行为，可以将鼠标不在位于元素上的任何点作为目标。

实现反向效果

考虑一个用例，其中菜单项的颜色在悬停时从 #999 过渡到黑色。为了在鼠标离开时创建相反的效果，我们可以将过渡移动到链接本身，而不是悬停状态：

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

登录后复制

此解决方案确保当鼠标离开时颜色从黑色过渡到 #999离开链接区域。

此外，CSS-tricks 提供了一篇文章，演示如何为悬停打开和悬停关闭设置不同的过渡状态：

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

登录后复制

以上是如何扭转 CSS :hover 的效果？的详细内容。更多信息请关注PHP中文网其他相关文章！