这是我的 html 代码:
li.searchbar a.searchbar-text:hover {
color: red !important;
margin-left: -10px;
transition: opacity .9s, margin-left .5s, margin-right .5s;
-webkit-transition: opacity .9s, margin-left .5s, margin-right .5s;
}
<li class="col-sm-5 searchbar">
<a class="text-left"><i class="fa fa-search" aria-hidden="true"></i></a>
<a class="searchbar-text">
<span class="first-seach-text">Search France</span>
<span class="second-seach-text">and beyond</span>
</a>
</li>
鼠标悬停时,它向左平滑移动,但当鼠标离开时,它快速向右移动。(我希望平滑)。
最佳答案
因此过渡发生在悬停时,而不是悬停时。所以你需要在没有悬停状态的元素上设置过渡。
例如:为你的演示添加
li.searchbar a.searchbar-text {
transition:all .5s ease;
}
关于html - CSS:悬停和离开之间的平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46085733/