如何向悬停添加过渡[重复]答案

【问题标题】：how to add a transition to a hover [duplicate]如何向悬停添加过渡[重复]
【发布时间】：2015-11-06 13:46:36
【问题描述】：

我有一个类，其中隐藏了溢出-x。将鼠标悬停在类上时，溢出-x 应该变得可见但有延迟（过渡）我只是不知道该怎么做：

.syntaxhighlighter {
 width: 100% !important;
 overflow-x: hidden;
 font-size: 1em !important;
 padding: 10px 0 10px 0;
 background-color: #ddd;

 }

.syntaxhighlighter:hover {
 width: 100% !important;
 overflow-x: visible; /* the visibility should come with a delay  (transition) */ 
 font-size: 1em !important;
 padding: 10px 0 10px 0;
 background-color: #ddd;
 }

【问题讨论】：

解释所需的“过渡”会有所帮助，除非您希望人们变得有创意;)
查看我为聊天创建的这个演示，在悬停时我应用滚动条...jsbin.com/iXaWOGUg/3/edit?html,css,js,output 但是你不能淡入淡出任何过渡滚动条，至少不使用默认的操作系统滚动条。
是的，有可能！您需要为溢出的父宽度设置动画:) 在您将孩子的宽度超出范围内。在父悬停时，只需为其宽度设置动画以匹配孩子的 :)
我想出了一个稍微不同的方法（我相信）可以达到效果，@nuet 正在寻找 - jsfiddle.net/k2481htw ...它通过透明的重复 <div> 工作（重复大小，重复内容）位于原始<div> 的顶部。然后，将复制的 div 悬停在上面时会出现“2 秒淡入”。
@Rounin 太棒了！这正是我一直在寻找的地方。感谢您的解决方案

标签： css css-transitions

【解决方案1】：

根据 CSS3 规范，overflow 属性是不可动画的，因此指定 transition-property: overflow-x 不会做任何事情。

见参考：http://www.w3.org/TR/css3-transitions/#animatable-css

【讨论】：

【解决方案2】：

.syntaxhighlighter:hover{
  transition: ease all 2.0s;
}

【讨论】：

好吧，这行不通。因为过渡应该只在悬停时开始
@RokoC.Buljan 你在说什么？（您回复了一条不存在的评论）
@nuet 尝试一下，如果悬停伪这样做。