Question

我知道显示属性的转换不起作用，但我想知道是否有解决方法。我尝试了可见性属性，但它似乎并不适合我想要实现的任务，或者我做错了。正如您所看到的，当您将span设置为display: none;时，将鼠标悬停在锚标记上时，我会显示不同的文字。动画不透明度不是一个好的解决方案，因为动画元素仍将占据它所拥有的空间。在Javascript或jQuery中可能有一种解决方法吗？这是代码。为简洁起见，我遗漏了transition属性及其前缀。我想要的动画是它在两者之间缓慢切换，即一个淡出，另一个淡入。没有必须重叠，但是如果有的话并不重要。

HTML

<div class="navbar">
 <ul>
 <li><a id="menu1" href="index.html"><i class="fa fa-home"></i><span>&nbsp;Home</span><span class="show">&nbsp;Welcome Home</span></a></li>
 </ul>
 </div>

CSS

.show, a:hover span { 
display: none; 
}
a:hover .show { 
display: inline;
}

Answer 1

将鼠标悬停在锚标记上时，可以尝试使用jquery幻灯片切换。查看http://api.jquery.com/slideToggle/

一个例子是

$("#menu1").hover(function () { $("#menu1 span").slideToggle("slow"); }, function(){ $("#menu1 span").slideToggle("slow"); });

Answer 2

您可以尝试将鼠标悬停在对象上并为不透明度设置动画。让它漂浮不会让他占据空间。

干杯J

如何解决显示属性的过渡？

2 个答案: