Fatal编程技术网
  • jquery/
  • jQuery在悬停状态下交换z索引

jQuery在悬停状态下交换z索引

jquery

jQuery在悬停状态下交换z索引,jquery,hover,z-index,Jquery,Hover,Z Index,我有一个“了解更多”按钮，当用户悬停在上面时，会在包含文本块的按钮上方显示一个“更多信息框”。我很难让它正常工作，因为更多信息框似乎干扰了悬停功能。我上传了一个我正在努力实现的示例： css: #容器{边距：30px 0；} .更多信息{背景：#ccc；边距：0自动；填充：10px 20px；位置：相对；顶部：-38px；宽度：355px；z索引：0；} .more_info p{color:#fff；字体大小：12px；行高：1.3；边距：0；} .了解更多信息{背景：#333；颜色：#fff

我有一个“了解更多”按钮，当用户悬停在上面时，会在包含文本块的按钮上方显示一个“更多信息框”。我很难让它正常工作，因为更多信息框似乎干扰了悬停功能。我上传了一个我正在努力实现的示例：

css:

#容器{边距：30px 0；}

.更多信息{背景：#ccc；边距：0自动；填充：10px 20px；位置：相对；顶部：-38px；宽度：355px；z索引：0；}

.more_info p{color:#fff；字体大小：12px；行高：1.3；边距：0；}

.了解更多信息{背景：#333；颜色：#fff；显示：块；边距：0自动；填充：10px 0；位置：相对；文本对齐：中心；文本装饰：无；宽度：100px；z索引：10；}

jquery：

$（'.more_info'）.css（{'opacity'：0}）

问题是当.more info的z索引大于.learn\u more\u btn时，悬停状态再次改变，并不断重复

为什么不把更多的信息放在按钮上？下面是我使用fadeIn和fadeOut而不是.animate的一个示例

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

这里有一个完整的页面作为示例。我在编写过程中做了一些更改（例如，将更多信息转换为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>


悬停圈套
*{边距：0；填充：0；轮廓：无；}
正文、html、div、blockquote、img、标签、p、h1、h2、h3、h4、h5、h6、pre、ul、ol、，
li，dl，dt，dd，form，fieldset，textarea，th，td{边框：0；边距：0；填充：0；轮廓：无；垂直对齐：基线；}
正文{背景：#fff；颜色：#000；字体：普通12px/1.5 Helvetica，Arial，无衬线；边距：0；填充：0；}
#容器{margin:30px 0；}
.hovery{z-index:20！重要；}
#更多信息{背景：ccc；边距：0自动；填充：10px 20px；位置：相对；顶部：-38px；宽度：355px；z索引：0；显示：无；}
#更多信息{颜色：#fff；字体大小：12px；行高：1.3；边距：0；}
.了解更多信息{背景：#333；颜色：#fff；显示：块；边距：0自动；填充：10px 0；位置：相对；文本对齐：中心；文本装饰：无；宽度：100px；z索引：10；}
$（文档）.ready（函数（）{
$（'.more_info'）.css（{'opacity'：0}）；
$（'.learn_more_btn'）.mouseenter（函数（）{
log（“输入：”+$（“#更多信息”）.css（'z-index'）；
$（'more_info'）.addClass（'hovery'）.fadeIn（）；
});           
$（“#更多信息”）.mouseleave（函数（）{
log（“Exit:+$（'#更多信息'）.css（'z-index'））；
$（“#更多信息”）.removeClass（'hovery'）.fadeOut（）；
});                      
});                   
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利
该网站的设计要求当您将鼠标悬停在“了解更多”按钮上时将其隐藏，因此我无法将“更多信息框”的位置更改为其上方。@downtomike太好了，很高兴我能提供帮助。我花了一点时间才弄明白，但我知道必须有一个简单的解决方案！ 
<!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>