Question

here is the fiddle of the code I am using: FIDDLE, due to an overlapping error preventing the a.trigger from working in IE I need to position the div.pop-up off the screen until the a.trigger is hovered over.

Anyone know how to do this

Answer 1

Here’s a bit of an old school hack at it. You simply position the element off screen to the left by 1000px and then bring it back just before you do your animation:

$(document).ready(function() {
    //If Javascript is running, change css on product-description to display:block
    //then hide the div, ready to animate
    $("div.pop-up").css({'display':'block','opacity':'0'})

    $("a.trigger").hover(
      function () {
        $(this).prev().css("left", "0px");
        $(this).prev().stop().animate({
          opacity: 1
        }, 500);
      },
      function () {
        // First answer had this line coming first.
        // $(this).prev().css("left", "-1000px");
        $(this).prev().stop().animate({
          opacity: 0
        }, 200);
        // It should actually probably be here
        // so the movement is still done invisibly
        $(this).prev().css("left", "-1000px");
      }
    )
  });​

You’ll also need to add the positioning to the left in the css.

/* HOVER STYLES */
div.pop-up {
  /*display: none;*/
  text-align: left;
  position: absolute;
  left: -1000px;      // <--- Send me left
  margin-top: -10px;
  width: 120px;
  padding: 0px 13px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

See me in action -> JSFiddle