jQuery swap z-index при наведении - PullRequest
Новая
       370

jQuery swap z-index при наведении

1 голос
/ 28 октября 2010

У меня есть кнопка «Узнать больше», которая, когда пользователь наводит курсор мыши, будет отображать «окно дополнительной информации» поверх кнопки, содержащей блок текста.У меня возникли проблемы с настройкой этой функции, поскольку окно с дополнительной информацией, кажется, мешает работе функции наведения.Я загрузил пример того, чего я пытаюсь достичь: http://recoverstudio.com/hover_zindex/

css:

#container { margin: 30px 0 0 0; }<br> .more_info { background: #ccc; margin: 0 auto; padding: 10px 20px; position: relative; top: -38px; width: 355px; z-index: 0; }<br> .more_info p { color: #fff; font-size: 12px; line-height: 1.3; margin: 0; }<br> .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});</p> <pre><code>$('.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}); });

Ответы [ 2 ]

2 голосов
/ 28 октября 2010

Что вам нужно сделать, это установить функцию выхода при наведении на всплывающее окно, а не другую.В противном случае вы попадаете в тот цикл, когда появление всплывающего окна вызывает выход, а затем - ввод ... и т. Д.

Вот пример полной страницы.Я изменил несколько вещей, работая над этим (например, more_info - идентификатор), и заменил animate на fadeIn и fadeOut, и я добавляю / удаляю класс вместо использования функции 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 голосов
/ 28 октября 2010

Проблема в том, что когда z-индекс .more-info больше, чем .learn_more_btn, при наведении курсора снова изменяется состояние, и он продолжает повторяться.

Почему бы не поместить .more_info поверх кнопки?Вот мой пример использования fadeIn и fadeOut вместо .animate

http://jsfiddle.net/FUaVw/

...