12

我有 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 的 left 和 top 属性搞砸了。

4

5 回答 5

22

你不需要 JS：

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

关键是玩CSS，避免JS计算。容器 div (myDiv) 应该是position: relative，弹出窗口必须在里面并且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/

于 2013-05-06T10:18:07.377 回答
1

我了解您的问题，我的解决方案是将每个包含弹出窗口的对象放在 pos relative 中，然后使用这些 CSS 设置您的弹出窗口：

.myPopUp{
    position:absolute;
    display : none;
    width:400px;
    height : 100px;
    margin-top : -50px;
    margin-left:-200px;
    background-color: red;
    top : 50%;
    left: 50%;
}

它将始终居中。

现在我知道你的所有可悬停的 div 只有 1 个弹出窗口。我的技巧是将弹出窗口保存在 var 中并将其从其父容器中删除，以将其附加到悬停的 div 中，如下所示：

var popUp = $('.myPopUp');

$('.myDiv').mouseover(appendPopUp);
$('.myDiv').mouseout(function(){popUp.css('display', 'none')});

function appendPopUp(){
    console.log(popUp.parent(), $(this))
    if(popUp.parent()[0] != $(this)[0]){
        popUp.remove();
        $(this).append(popUp);
    }
    popUp.css('display', 'block')
}

这应该可行，这是我的小提琴：http: //jsfiddle.net/7EEZT/

于 2013-05-06T16:01:38.723 回答
0 
$(window).on('resize', function(){
    var $md = $('.myDiv');
    positionDiv($md.position().left + $md.width() / 2, $md.position().top + $(this).height() / 2);
});
于 2013-05-01T15:53:50.530 回答
0

如果你有一个已知高度和宽度的 div，我有一个简单的 css 解决方案，你可以在 css 的帮助下完成相同的任务

.popupWindow {
    position:absolute;
    width:313px;
    height:383px;
    left:50%;
    top:50%;
    margin-left:-156px;/*half of width*/
    margin-top:-191px;/*half of height*/
    display:none;
}
于 2013-05-01T15:56:48.287 回答
0

选择 position:relative 试试这个。它将解决您与职位有关的问题。

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

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

CSS：

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

http://jsfiddle.net/kishan6446/PdNkg/13/

于 2013-05-06T14:36:33.340 回答