jQuery交換z-index懸停

我有一個「瞭解更多」按鈕，當用戶懸停時，將顯示「包含一個文本塊的按鈕頂部的」更多信息框「。我無法正常工作，因爲更多的信息框似乎干擾了懸停功能。我上傳的我想要達到一個例子：http://recoverstudio.com/hover_zindex/jQuery交換z-index懸停

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

來源

2010-10-28 downtomike

你需要做的是設置退出懸停功能是彈出，而不是其他什麼一個從我舉一個例子。否則，您會在該週期中出現彈出窗口，觸發退出，然後觸發輸入...等等。例如，我正在修改一些內容（比如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>

來源

2010-10-28 17:22:36 JAL

感謝Alex的幫助。它正在工作。 – downtomike 2010-10-28 18:57:04

@downtomike很好，很高興我能幫上忙。我花了一點才弄清楚，但我知道必須有一個簡單的解決方案！ – JAL 2010-10-28 22:19:48

問題是，當的z-index的。 more-info比.learn_more_btn更大，懸停狀態再次改變，並且不斷重複。

爲什麼不把.more_info放在按鈕上？下面是使用淡入淡出和代替.animate

http://jsfiddle.net/FUaVw/

來源

2010-10-28 14:59:11 SteD

該網站的設計要求將「瞭解更多按鈕」隱藏在其上方，因此我無法將「更多信息框」的位置更改爲位於其上方。 – downtomike 2010-10-28 16:13:30

jQuery交換z-index懸停

回答

相關問題