什么是相反的：悬停（鼠标离开）？

本文介绍了什么是相反的：悬停（鼠标离开）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有办法像：hover 一样使用 CSS？如： hover 是在鼠标输入中，是否存在一个等同于的CSS鼠标离开？

示例：

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

（请记住，我不希望只回答这个例子，而是整个与：hover >相反的问题。）

解决方案

如果我理解正确，您可以通过将转换移至链接而不是悬停状态来执行相同的操作：

  ul li a {
 color：＃999; 
过渡：颜色0.5s线性; / *无供应商后退* / 
 -o-transition：颜色0.5s线性; / * opera * / 
 -ms-transition：color 0.5s linear; / * IE 10 * / 
 -moz-transition：color 0.5s linear; / * Firefox * / 
 -webkit-transition：color 0.5s linear; / * safari和chrome * / 
} 
 
 ul li a：hover {
 color：black; 
光标：指针; 
} 
  

悬停的定义是：

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - 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;
}

这篇关于什么是相反的：悬停（鼠标离开）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！