SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    flickering div driving me crazy...help!

    I have an image that has an alt tag. On hover of the image I am showing the alt text over the image. My issue is that the div containing the alt text keeps flickering when you hover over the image.. here is a demo of what's happening: http://jsfiddle.net/mCrM5/1/

    I am not sure what needs to be done to remedy the situation.

    Any help would be greatly appreciated!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    One way to stop the flickering would be to structure your HTML slightly differently:

    HTML Code:
    <li>
      <a href="#" class="thumbnail" >
        <img src="http://placekitten.com/205/145" alt="Show alt text over image" />
      </a>
    </li>
    then attach the event handler to the anchor tag:

    Code JavaScript:
    $("a.thumbnail").on(
    {
      mouseenter: function() 
      {
        var a = $(this).find("img").attr('alt');
        $(this).append('<div class="rollover">' + a + '</div>');
      },
      mouseleave: function()
      {
        $('.rollover').hide();
      }
    });

    Here's a demo to copy and paste:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Image hover script</title>
        <style>
          ul li img.thumbnail{
            position:relative;
          }
          
          .rollover {
            position:absolute;
            display:block;
            background:yellow;
            background-repeat:repeat;
            -moz-box-shadow: 0 0 1px rgba(204,204,204,0.05);
            -webkit-box-shadow: 0 0 1px rgba(204,204,204,0.05);
            box-shadow: 0 0 1px rgba(204,204,204,0.05);
            z-index:1000;
            top:45px;  
            text-align:center;
            width:207px;
            height:40px;
            padding-top:7px;
          }
        </style>
      </head>
      
      <body>
        <ul>
          <li>
            <a href="#" class="thumbnail" >
              <img src="http://placekitten.com/205/145" alt="Show alt text over image" />
            </a>
          </li>
        </ul> 
         
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $("a.thumbnail").on(
          {
            mouseenter: function() 
            {
              var a = $(this).find("img").attr('alt');
              $(this).append('<div class="rollover">' + a + '</div>');
              console.log("on");
            },
            mouseleave: function()
            {
              $('.rollover').hide();
              console.log("off");
            }
          });
        </script>
      </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •