如何将转换添加到悬停

Question

我有一个类，其中我有overflow-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;
 }

Answer 1

根据CSS3规范，overflow属性不可动画，因此指定transition-property: overflow-x将无法执行任何操作。

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

Answer 2

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