有没有办法做与:hoverusing onlyCSS相反的事情?例如:如果:hoveron Mouse Enter,那么是否有一个CSS等同于on Mouse Leave

示例:

我有一个使用列表项的HTML菜单.当我将鼠标悬停在其中一个项目上时,会出现一个从#999black的CSS colored颜色 动画.当鼠标离开项目区域(动画从black#999)时,如何创建相反的效果?

jsFiddle

(请记住,我不想只回答这个例子,而是要回答整个":hover的对立面"问题.)

推荐答案

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

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/

悬停的定义是:

:悬停 Select 器用于在鼠标悬停时 Select 图元

根据这个定义,悬停的对立面是鼠标悬停在其上方的任何点.比我聪明得多的人完成了这篇文章,在两个州设置了不同的转换-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;
}

Css相关问答推荐

如何在没有额外间隔的情况下使用Angularmaterial 图标?

如何使一组元素的行为像字符串一样?

无法瞄准元素

当鼠标悬停在元素的::第一行时,如何应用样式?

在主零部件悬停上对子零部件设置Angular 样式

如果`line-Height:1`,则垂直字母所占的高度

无法在 React 组件 (TypeScript) 中应用 Tailwind CSS 类

使用 CSS 定位悬停/弹出 div - 字形浏览器网页

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

创建一个CSS动画的对角线线条.

是否有一个 CSS 可以根据字符的高度 for each 字符呈现可变高度?

如何使用props 为 Vue 中的组件创建动态背景图像?

CSS 字符串变量的正确null值是多少?

在revealjs/Quarto中定义一类反背景的幻灯片

css渐变实现2色虚线边框

在表格中隐藏绝对伪元素

css 单行或多行垂直对齐

将文本放在 div 的底部

如何对齐标签和文本区域?

CSS 悬停与 JavaScript 鼠标悬停