0

I am trying to replicate the text overlay effect that occurs when you mouse over an image - found on the Guardian web site.

I have it working except when my mouse goes over the trail-text area that area bounces (slideDown slideUp) repeatedly a number of times.

I think it is because the trail-text area becomes the focus and causes the mouseout event.

Anyway any suggestions/tips would be really helpful. Many thanks, Ben...

mypage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>TEST</title>
    <style type="text/css">
      .pixie {
        width: 870px;
        padding: 0;
        margin: 0;
      }

      .strap {
        padding: 0;
        margin: 0;
      }

      div.caption{
        padding-left: 10px;
        /*background-color: #a5a5a5;*/
        background-color: #e03d32;
        color: white;
      }
      .caption h3 {
        color: white;
      }

      .pixie a,
      .pixie div,
      .pixie a:hover {
        display: block;
        position: relative;
        text-decoration: none;
      }

      .pixie div.trail-text {
        color: #333;
        background-color: transparent;
        background-image: url(../images/grey-bg.png);
        background-repeat: repeat;
      }

      .pixie div.trail-text {
        display: none;
        margin-top: 0;
        position: absolute;
        overflow: hidden;
        text-align: left;
        padding-top: 2em;
        padding-bottom: 0;
        z-index: 10;
        height: 4.25em;
        width: 870px;
      }
    </style>
    <script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
    <script src='javascripts/main.js' type='text/javascript'></script>
  </head>

  <body>
    <div class='pixie'>
      <div class='caption'>
        <h3>Some Big Heading</h3>
        <p class='strap'>Some strapline of stuff</p>
      </div>
      <div class='trail-text'>
        The <strong>Overlay text</strong> which should appear and then disappear.
      </div>

      <img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
    </div>
  </body>
</html>

main.js

$(document).ready(function(){

  $("div.trail-text").attr("style", "display: none;");

  if ($(".pixie,div.trail-text")) {
    var pixies = $(".pixie,div.trail-text");
    $(pixies).mouseover(function() {
      $(this).find("div.trail-text").slideDown("fast")
    }).mouseout(function() {
      $(this).find("div.trail-text").slideUp("fast")
    });
  };
});
emson
  • 10,005
  • 4
  • 24
  • 27

1 Answers1

2

The problem is that the mouseover and mouseout events bubble upward, which means they fire every time the mouse enters or leaves any element within your div.

You should use jQuery's hover method, like this:

$(".pixie,div.trail-text").hover(
    function() { $(this).find("div.trail-text").slideDown("fast"); },
    function() { $(this).find("div.trail-text").slideUp("fast"); }
);
SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Mouseover doesn't fire every time the mouse is moved, just every time you move the mouse over a child element of the element you attached the event to. – moff Jul 08 '09 at 17:45
  • 1
    If you don't want to use hover - use mouseenter and mouseleave instead of mouseover and mouseout – Chris B Jul 08 '09 at 18:12
  • Yes, but hover is more convenient, and there's no reason not to use it. (Is there?) – SLaks Jul 08 '09 at 18:33
  • Great - that is perfect. I had tried using hover before but didn't put both elements into the selector, and so still had a problem. Your solution works perfectly - many thanks. – emson Jul 08 '09 at 22:56