如何将div从屏幕上移开并将其重新悬停在屏幕上

时间:2012-07-12 11:16:27

标签: jquery html css position

这里是我使用的代码的小提琴:FIDDLE,由于重叠错误阻止a.trigger在IE中工作我需要将div.pop-up放在屏幕上直到a .trigger正在盘旋。

任何人都知道如何做到这一点

1 个答案:

答案 0 :(得分:1)

这是一个古老的学校黑客攻击它。您只需将元素从屏幕左侧放置1000px,然后在动画制作之前将其恢复原状:

$(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%;
}

见我行动 - &gt; JSFiddle