jquery - 如何将 div 放置在屏幕外并将其重新悬停

Question

这是我正在使用的代码的 fiddle :FIDDLE ，由于重叠错误阻止 a.trigger 在 IE 中工作，我需要将 div.pop-up 定位在屏幕之外，直到 a.trigger 悬停在上面。

谁知道怎么做

Answer 1

这里有一些老派的技巧。您只需将元素定位到屏幕左侧 1000 像素，然后在您制作动画之前将其放回:

$(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");
      }
    )
  });​

您还需要在 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%;
}

看我的实际操作 -> JSFiddle