Question

我有一个“了解更多”按钮，当用户将鼠标悬停在该按钮上时，将在包含一个文本块的按钮顶部显示“更多信息框”。我无法正常工作，因为更多信息框似乎干扰了悬停功能。我上传了一个我想要实现的例子：http://recoverstudio.com/hover_zindex/

的CSS：

#container { margin: 30px 0 0 0; } .more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -38px; width: 355px; z-index: 0; } .more_info p { color: #fff; font-size: 12px; line-height: 1.3; margin: 0; } .learn_more_btn { background: #333; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; text-align: center; text-decoration: none; width: 100px; z-index: 10;}

jquery的：

$('.more_info').css({'opacity' : 0});



$('.learn_more_btn').hover(function(){
    $('.more_info').stop().animate({'opacity': 1}, 300).css({'z-index' : 20});
},function(){
    $('.more_info').stop().animate({'opacity': 0}, 300).css({'z-index' : 0});
});

$('.learn_more_btn').hover(function(){ $('.more_info').stop().animate({'opacity': 1}, 300).css({'z-index' : 20}); },function(){ $('.more_info').stop().animate({'opacity': 0}, 300).css({'z-index' : 0}); });

Answer 1

您需要做的是将退出悬停功能设置为弹出，而不是另一个。否则你会陷入那个弹出窗口触发退出的循环中，然后触发输入......等等。

这是一个完整的页面作为例子。我在处理它时已经改变了一些东西（例如，more_info到ID，并用fadeIn和fadeOut替换了animate，并且添加/删除了一个类而不是使用jQuery的css函数）。当然，这些可以改回来。

我对此进行了测试，它在FF4和Chrome中按预期工作。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Hover Snaddle</title>

    <style type="text/css">

      * { margin: 0; padding: 0; outline: none; }
      body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  
      li, dl, dt, dd, form, fieldset, textarea, th, td  { border: 0; margin: 0; padding: 0; outline: none; vertical-align: baseline; }

      body { background: #fff; color: #000; font: normal 12px/1.5 Helvetica, Arial, sans-serif; margin: 0; padding: 0; }

      #container { margin: 30px 0 0 0; }
      .hovery{z-index:20!important;}
      #more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -38px; width: 355px; z-index: 0; display:none;}
      #more_info p { color: #fff; font-size: 12px; line-height: 1.3; margin: 0; }
      .learn_more_btn { background: #333; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; text-align: center; text-decoration: none; width: 100px; z-index: 10;}
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.more_info').css({'opacity' : 0});

        $('.learn_more_btn').mouseenter(function(){
          console.log("enter: "+$('#more_info').css('z-index'));
          $('#more_info').addClass('hovery').fadeIn();
          });           
        $('#more_info').mouseleave(function(){  
           console.log("Exit: "+$('#more_info').css('z-index'));
           $('#more_info').removeClass('hovery').fadeOut();
           });                      
        });                   
    </script>                  
  </head>
  <body>
    <div id="container">

      <a href="#" class="learn_more_btn">Learn More</a>
      <div id="more_info">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

  </body>
</html>

Answer 2

问题是当.more-info的z-index大于.learn_more_btn时，悬停会再次改变状态，并且不断重复。

为什么不把.more_info放在按钮的顶部？以下是我使用fadeIn和fadeOut而不是.animate

的示例

http://jsfiddle.net/FUaVw/

悬停时jQuery交换z-index

2 个答案: