Question

我在CSS中有问题它无法在菜单栏中顺利移动，此链接中的菜单任何人都可以帮助我谢谢。

这是链接jsfiddle。

我试试这个但没有任何作用：

.div-move{
   -webkit-transition: width 1s ease-in-out;
   -moz-transition: width 1s ease-in-out;
   -o-transition: width 1s ease-in-out;
   transition: width 1s ease-in-out;
}

Answer 1

你想转型为＆＃34; auto＆＃34;价值是其中一个问题。

.notification-bar:hover .text-header-move{
    width:auto;
}

看看这个小提琴： http://jsfiddle.net/herrfischerhamburg/jok48kpz/2/

我更新了小提琴以使用＆＃34; max-width＆＃34;，我认为这是比固定宽度更好的解决方案。

Answer 2

您无法转换为width：auto，但使用max-width会自动使用文本大小。只需确保：悬停宽度比您使用的文本长，所以它将全部显示。此外，我建议在悬停和常规类上使用转换，这样当你鼠标离开菜单时也会有一个转换。尝试更改这些类：

.text-header-move{
    max-width: 0px;
    float: right;
    overflow: hidden;     
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;   
}
.notification-bar:hover .text-header-move{
    max-width:400px;   
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;    
}

我在css中遇到转换问题，它在菜单栏中无法顺利移动？

2 个答案: