jQuery 在悬停时交换 z-index

发布于 2024-09-29 08:40:36 字数 861 浏览 5 评论 0原文

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

css :

#container { 边距: 30px 0 0 0; }
.more_info { 背景：#ccc;保证金：0 自动；内边距：10px 20px；位置：相对；顶部：-38px；宽度：355px； z 索引：0； }
.more_info p { 颜色：#fff;字体大小：12px；行高：1.3；保证金：0； }
.learn_more_btn { 背景：#333;颜色：#fff；显示：块；保证金：0 自动；内边距：10px 0；位置：相对；文本对齐：居中；文本装饰：无；宽度：100px； z 索引：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});
});

原文

I have a "Learn More" button that when the user hovers over, will display a "more info box" over top of the button that contains a block of text. I am having trouble getting this to work correctly as the more info box seems to be interfering with the hover function. I uploaded an example of what I'm trying to achieve: 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});
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水水月牙 2024-10-06 08:40:36

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

这是一个完整的页面作为示例。我在处理它时更改了一些内容（例如，将 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>

What you need to do is set the exit hover function to be for the pop up, not the other one. Otherwise you get caught in that cycle where having the pop up appear triggers the exit, and then that triggers the enter... etc.

Here's a complete page as an example. I've changed a few things as I was working on it (more_info to an ID, for instance, and replaced animate with fadeIn and fadeOut, and am adding/removing a class instead of using jQuery's css function). Those could be changed back, of course.

I tested this and it works as expected in FF4 and 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>

回复收藏 0 原文