-2

.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 をアニメーション化する (または、少なくとも遅くする、フェードインする) にはどうすればよいですか?

4

2 に答える 2

0

この作業は次の方法で簡単に実行できますjquery。

HTML:

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

CSS:

.text {
    display:none;
 }

Jクエリ:

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

これを試して

于 2013-10-28T13:56:17.633 に答える
0

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

デモ

于 2013-10-28T13:51:43.760 に答える