缩放后的绝对位置

Question

我有div class="myDiv".我需要做这个逻辑:鼠标悬停时,我想在div的中间显示一个弹出窗口.

为此,我有以下内容:

$(".myDiv").mouseover(function () {
  positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});

function positionDiv(xPosition ,yPosition ) {
  $("#popupWindow").css("left", xPosition + "px");
  $("#popupWindow").css("top", yPosition + "px");
  $("#popupWindow").show();
}

CSS:

.popupWindow{
  position:absolute;
  width:313px;
  height:383px;
  display:none;
}

这将弹出窗口定位在鼠标悬停的div中间.在这一点上,一切都很好.

但是,如果网站放大(使用浏览器缩放功能),则位置将变得混乱.弹出窗口不再出现在中间myDiv.

知道可能是什么问题吗？

编辑:

有关详细信息,如果已创建并缩放,则可以.但是当我将鼠标移动到另一个myDiv并且新的弹出窗口出现在一个奇怪的位置时.Div的左侧和顶部属性搞乱了.

Answer 1

你不需要JS:

http://jsfiddle.net/coma/6VUpS/1/

关键是要使用CSS并避免JS计算.容器div(myDiv)应该是position:relative,弹出窗口必须在inside和position:absolute,top和left到50%并使用负边距来居中它(http://www.css-101.org/negative-保证金/ 06.php).

尝试避免使用JS来实现视觉效果,只有CSS确保正确的位置,即使在缩放时也是如此,因为它是由浏览器呈现的.

HTML

<div class="myDiv">
    Hi!
    <div class="popupWindow">you are welcome!</div>
</div>

CSS

div.myDiv {
    padding: 10px;
    background-color: #eee;
    margin: 50px 0;
    position: relative;
}

div.popupWindow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    width: 200px;
    line-height: 100px;
    background-color: #111;
    color: #fff;
    text-align: center;
    display: none;
    pointer-events: none;
}

div.myDiv:hover > div.popupWindow {
    display: block;
}

奖金跟踪使用复选框点击/点击/切换弹出窗口和一些淡入:

http://jsfiddle.net/coma/6VUpS/3/

更hacky:

http://jsfiddle.net/coma/6VUpS/

更复杂的例子:

http://jsfiddle.net/coma/dHTHG/