有什么办法做相反的:hover只使用CSS?如:if:hover在鼠标进入,有一个CSS等效于鼠标离开?
例:
我有一个HTML菜单使用列表项。当我悬停其中一个项目,有一个CSS颜色动画从#999到黑色。当鼠标离开项目区域时,如何创建相反的效果,动画从黑色到#999?
(记住,我不想只回答这个例子,而是整个“相反的:悬停”问题。)
解决方法
如果我理解正确,你可以做同样的事情,将你的过渡到链接,而不是悬停状态:
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的定义是:
The :hover selector is used to select elements when you mouse over
them.
通过该定义,悬停的相反是鼠标不在其上的任何点。比我更聪明的人做了这篇文章,设置不同的过渡在两个国家 – 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; }