Question

我希望在悬停

时有动画，它将从顶部滑动并在鼠标移开时滑动。我做了所有，但有一点问题。请查看我的演示here

我的代码是 CSS

    #nav{width:200px;
height:60px;
background:#096;
list-style:none;
} 

 #nav li
 {
     width:200px;
     height:60px;
     float:left;
     position:relative;

}

     #nav li a
     {
         width:200px;
         height:50px;
         background:#09F;
         color:#000;
         display:block;
         position:relative;
         margin:0;
         z-index:100;

         }

         #nav li a:hover
         {
             color:#fff;
             }

         #nav li .hover
         { width:200px;
         height:50px;
         background:#000;
         color:#0FF;
        display:none;
       background-position:0 0;
       position:absolute;
       top:0;
         margin:0;
         z-index:0;
         opacity:0.9;

             }

脚本

$(document).ready(function()
 {    
  $('#nav li a').append('<div class="hover">');

  $('#nav li a').hover(function (){
      $('.hover').stop(true, true).slideDown('1000');    

        }, 

        //Mouseout, fadeOut the hover class
        function() {

            $('.hover').stop(true, true).slideUp('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


      });
});

HTML

<ul id="nav">

   <li><a href="index.html">Home</a></li>


  </ul>

但是我只查看.hover div正在滑动，但我的Home文本没有查看。我已经为标签添加了z-index，但是当幻灯片工作时，文本也没有被查看。

请帮我解决一下。提前感谢大家。

Answer 1

为z-index: -1设置.hover。它将解决问题。

DEMO： http://jsfiddle.net/DSusn/2/

并注意您的fadeIn和fadeOut来电。如果您需要将速度设置为毫秒数，则其参数应为整数，即不带引号fadeIn(1000)。

jQuery动画在悬停李

1 个答案: