Question

有没有办法只使用 CSS与:hover 相反？如：如果:hover是on Mouse Enter，是否有相当于on Mouse Leave的CSS？

示例：

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

jsFiddle

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

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/

悬停的定义是：

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

根据该定义，悬停的反面是鼠标不的任何点。比我聪明的人做了这篇文章，在两个状态上设置了不同的过渡 - 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 2

只需使用CSS transitions代替动画。

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

A:hover {
    color: #000;
}

Live demo

Answer 3

相反的是使用 :not

例如

selection:not(:hover) { rules }

Answer 4

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

您可以使用：将鼠标悬停在除相关项目之外的所有其他元素上以实现此效果。但我不确定会有多实用。

我认为你必须看一下JS / jQuery解决方案。

Answer 5

您可以使用CSS3过渡

一些好的链接：

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

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

Answer 6

只需在要处理的元素上添加一个过渡即可。请注意，页面加载时可能会有一些影响。就像您更改边界半径一样，在dom加载时您会看到它。

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

Answer 7

你误解了:hover;它说鼠标在项目上方，而不是鼠标刚进入项目。

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

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

Answer 8

:hover的反面似乎是:link。

（编辑：技术上并非相反，因为有4个选择器:link，:visited，:hover和:active。如果包含:focus，则为5。）

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

解决了这个问题

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

Answer 9

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

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

提示：使用transition-duration属性确定速度   ＆＃34; hover＆＃34;效果：

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

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

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

Answer 10

将持续时间设置为非悬停选项：

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

li a:hover {
  padding:19px;
}

Answer 11

只需在类的inicial上添加一个转场和动画名称，就您的情况而言，只需添加一个“ 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>

与之相反的是：悬停（鼠标离开）？

11 个答案: