Home/ Questions/Q 269877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T23:54:30+00:00

I am trying to replicate the text overlay effect that occurs when you mouse

  • 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")
    });
  };
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"); }
);
    • 0