Question

我隐藏了一个带有.text和

的div

 div.text {
    visibility:hidden;
 }

这个div被另一个包含.col3

的div所包围

<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"})
        });
    });
});

Demo

Answer 2

您可以使用jquery轻松完成此工作：

HTML：

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

CSS：

.text {
    display:none;
 }

Jquery的：

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

Try This

显示时隐藏div上的动画

2 个答案: