ansaurus

Question

Answer 1

A:

The problem is when the z-index of .more-info is bigger than .learn_more_btn, the hover changes state again, and it keeps repeating.

Why not put the .more_info on top of the button? Here's an example from me using fadeIn and fadeOut instead of .animate

http://jsfiddle.net/FUaVw/

SteD 2010-10-28 14:59:11

The design of the site calls for the 'learn more button' to be hidden when you hover over it, so I can't change the position of the 'more info box' to be above it.

downtomike 2010-10-28 16:13:30

Answer 2

A:

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"&gt;&lt;/script&gt;
    <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>

Alex JL 2010-10-28 17:22:36

thanks for the help Alex. it is working now.

downtomike 2010-10-28 18:57:04

@downtomike Great, glad I could help. It took me a bit to figure out, but I knew there had to be a simple solution!

Alex JL 2010-10-28 22:19:48

ansaurus

tags:

views:

answers:

jQuery swap z-index on hover

related questions