【发布时间】：2015-04-15 00:02:58
【问题描述】：
我有两个面板，左侧和右侧。一旦用户将鼠标悬停在右侧面板的任何元素上，一个新的 div（称为框）应该在悬停元素的右侧可见。
我可以设计它，但问题是宽度是固定的，弹出面板的位置会根据屏幕大小而变化。它在 JSFiddle 上不能正常工作，所以我没有把它放在那里，但是，提供了在任何浏览器中都可以正常工作的完整代码。
- 请注意两个面板都在一个“容器”中。
- 即使屏幕尺寸发生变化，红框也应保留在右侧面板上。 （屏幕截图中显示的位置）
- 由于屏幕小，移动设备不会显示红色框。
职位
Left Panel Right Panel
Element1 |box1
Element2 |box2
框元素与右侧面板重叠。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-7" style="background-color: blue;">
<div class="row">
<div class="col-md-12" style="padding-right: 0;">
<div class="myTarget" style="background-color: white;">
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<p>This is element 1 of panel left </p>
<div id="box" class="col-md-8 hidden-xs"
style="display: none; z-index: 1000; background-color: red; border-color: blue;">
<p>This is the third panel of element 1 that need to be re-positioned.</p>
</div>
</div>
<div class="myTarget" style="background-color: white;">
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<p>This is element 2 of panel left</p>
<div id="box" class="col-md-8 hidden-xs"
style="display: none; z-index: 1000; background-color: red; border-color: blue;">
<p>This is the third panel of element 2 that need to be re-positioned.</p>
</div>
</div>
</div>
</div>
</div>
<div id="rightPanel" class="col-md-4" style="background-color:green;padding-left: 0">
<p>This is panel right</p>
<p>This is panel right</p>
<p>This is panel right</p>
<p>This is panel right</p>
<p>This is panel right</p>
<p>This is panel right</p>
<p>This is panel right</p>
</div>
</div>
</div>
<script>
$(".myTarget").hover(function() {
var temp= $(this).children("#box");
var tempLeft = $('#rightPanel').offset().left;
temp.css({
display : "block",
position : "absolute",
left : tempLeft + "px",
top : 0 + "px",
});
}, function() {
$(this).children("#box").hide();
});
</script>
</body>
</html>
我想这就是丹尼尔想要的
没有元素被悬停
元素1被悬停，所以元素1的红色框会显示在它的右边。
元素2被悬停，所以元素2的红色框会显示在它的右边。
【问题讨论】：
-
您可以在使其可见时通过 Javascript 定位它，然后在窗口大小发生变化时重新定位它（导致重新布局）。或者，您可以使用 CSS 样式将其相对于其他元素定位。
-
@jfriend00 我认识哥们，但不知道如何
-
然后问一个更具体的问题，关于您究竟需要什么帮助。你的问题太模糊了，因为有很多不同的方法取决于你想要做什么以及你想要它定位的确切方式、你想要它定位的时间、它是否与其他事物重叠等等。我建议你问一个更具体的问题，你更有可能得到一个详细的答案。您评论中的“伙伴”参考并没有很好地体现出来。我试图帮助你。如果您不希望我提供帮助，我可以很乐意花时间处理其他问题而忽略您的问题。
-
@jfriend00 误会了抱歉，无论如何我更新了问题，如果仍然不清楚，请告诉我改写它
-
@jfriend00 框将与右侧面板重叠。我不关心 js 和静态选项，我想要的只是确保它适用于每个屏幕尺寸。 （手机除外）
标签： javascript jquery twitter-bootstrap twitter-bootstrap-3