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

Question

这是我正在使用的代码的小提琴：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