html - 显示时隐藏 div 上的动画

Question

我在类.text中隐藏了一个 div

 div.text {
    visibility:hidden;
 }

这个 div 被另一个具有该类的 div 包围.col3

<div class="col3">
   <div class="image-box">
      <div class="text"> test </div>
   </div>
</div>

visible当我将鼠标悬停在上方时，我希望能见度变为“ ”.col3

我试过了

.col3:hover > div.text {
   visibility:visible;
}

所以这很有效，并且当我将鼠标悬停在周围的 div 时，让 div 可见。

如何为 div 设置动画（或至少减慢、淡入）？

Answer 1

使用 jQuery，您可以获取以下代码片段：

$(document).ready(function()
{
    $(".col3").hover(function()
    {
        // fading in (500 = animation time in ms)
        $("div.text").css({opacity: 0.0, visibility: "visible"}, 500).animate({opacity:         1.0});
    }, function()
    {
        // hover out function -> fading out
        $("div.text").animate({opacity: 0.0}, 500, function()
        {
            // callback function -> setting visibility back to hidden
            $(this).css({visibility: "hidden"})
        });
    });
});

演示

Answer 2

您可以通过以下方式轻松完成这项工作jquery：

HTML：

<div class="col3">
   <div class="image-box">
      <div class="text"> test </div>
   </div>
</div>

CSS：

.text {
    display:none;
 }

查询：

 $('.col3').hover(function(){
        $('.text').fadeOut(1000);
        $('.text').fadeIn( 1000 );
    }, function() {
     $('.text').css('display', 'none');
  }
);

尝试这个