如何使div成为所选元素的右侧？
我有左右两个面板。一旦用户将鼠标悬停在右侧面板的任何元素上，就会在悬停元素的右侧看到一个新的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悬停，因此元素的红色框将显示在右侧。
元素2悬停，因此元素2的红色框将显示在其右侧。
5 个答案:
答案 0 :(得分：2)
您想要将框放在右边并垂直对齐myTarget div吗？ 在脚本中再添加一行，然后查看。
$(".myTarget").hover(function() {
var box_top = $(this).position().top;
var temp= $(this).children("#box");
var tempLeft = $('#rightPanel').offset().left;
temp.css({
display : "block",
position : "absolute",
left : tempLeft + "px",
top : box_top + "px",
});
}, function() {
$(this).children("#box").hide();
});
元素1鼠标悬停
元素2鼠标悬停
答案 1 :(得分：2)
首先，您有两个具有相同ID的元素。这很糟糕，所以我把它们改成了类。我删除了令人讨厌的内联样式并使用了一些适当的CSS声明。我也把你的盒子改成了跨度。你马上就会明白为什么。
如果以下代码段不起作用，则为JSFiddle。
据我了解，您希望box相对于p代码定位。基于此，我建议将box元素更改为span，然后使用jQuery clone()函数，如下所示：
$('.myTarget').on('mouseover', 'p', function () {
$(this).parent().children('.box').clone().appendTo($(this));
});
$('.myTarget').on('mouseout', 'p', function () {
$(this).children('.box').remove();
});.col-md-7 {
background-color: blue;
}
.col-md-12 {
padding-right: 0;
}
#rightPanel {
background-color:green;
padding-left: 0;
}
.myTarget {
background-color: white;
}
.box {
display:none;
z-index: 1000;
background-color: red;
border-color:blue;
}
.myTarget p {
position:relative;
}
.myTarget p .box {
display: block;
position: absolute;
left: 100%;
top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<div class="myTarget">
<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 class="box" class="col-md-8 hidden-xs">
<p>This is the third panel of element 1 that need to be re-positioned.</p>
</div>
</div>
<div class="myTarget">
<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>
<span class="box" class="col-md-8 hidden-xs">
<p>This is the third panel of element 2 that need to be re-positioned.</p>
</span>
</div>
</div>
</div>
</div>
<div id="rightPanel" class="col-md-4">
<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>
您可以使用.myTarget p .box的CSS定位来根据需要定位它。
编辑1
现在您已经了解了图像所需的内容，我已经更新了代码。评论应该解释一下，如果代码段不起作用，这里是fiddle：
// Loop through each box and set the width to the same as #rightPanel
$('.box').each(function() {
var newWidth = $('#rightPanel').outerWidth();
$(this).outerWidth(newWidth);
});.col-md-7 {
background-color: blue;
}
.col-md-12 {
padding-right: 0;
}
#rightPanel {
background-color:green;
padding-left: 0;
}
.myTarget {
background-color: white;
position:relative;
}
.box {
display:none;
z-index: 1000;
background-color: red;
border-color:blue;
/* Position the box to the top right of .myTarger */
position: absolute;
left: 100%;
top: 0;
}
.myTarget:hover .box { /* Show the box on hover */
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
<div class="myTarget">
<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 class="box" class="col-md-8 hidden-xs">
<p>This is the third panel of element 1 that need to be re-positioned.</p>
</div>
</div>
<div class="myTarget">
<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>
<span class="box" class="col-md-8 hidden-xs">
<p>This is the third panel of element 2 that need to be re-positioned.</p>
</span>
</div>
</div>
</div>
</div>
<div id="rightPanel" class="col-md-4">
<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>
答案 2 :(得分：1)
我刚刚复制了您的代码并进行了更改
将所有元素的css移动到css文件中!!!!
将Box从id更改为class
将leftPanels位置设置为relative
设置框css：position：absolute;显示：无; z索引：1000;左：100％;
简单显示＆＃34;框＆＃34;在当前＆＃34; myTarget＆＃34;关于鼠标悬停。
将with设置为＆＃34; rightPanel＆＃34;如果你想要的话！
下面是代码：
<!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;position: relative;">
<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 class="box" class="col-md-8 hidden-xs"
style="position: absolute;top:0px; left:100%; 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; position: relative;">
<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 class="box" class="col-md-8 hidden-xs"
style="position:absolute; top:0px; left:100%; 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>
$(function(){//start of load
//This only works if box is inside leftPanel, and leftPanel have position absolute or relative!
//Set box "position:absolute;display:none;z-index:9999;top:0" with css
$(".myTarget").hover(function() {
//CHANGE "box" id to class!!
var box = $(this).children(".box")
box.show();
//If you want dynamic resize of with:
box.css("width", $("#rightPanel").outerWidth());
}, function() {
$(".box").hide();//hide all "box" class elements
});
});
</script>
</body>
</html>
答案 3 :(得分：0)
您可以获取鼠标的位置并使用该信息放置第二个div。
getMousePosition: function(){
var xOffset = event.pageX;
var yOffset = event.pageY;
//////////////console.log("xOffset: " + xOffset);
//////////////console.log("yOffset: " + yOffset);
}, //. getMousePosition
或者您可以在开始时将div放在正确的位置并应用＆＃34; display：none＆＃34;到第二个div。然后只需将其打开＆＃34;显示：阻止;＆＃34;何时需要。如果需要，在调用时，用插入ajax的内容填充div2。
或者你可以获得div 1左上角的位置并使用该信息通过javascript调整将div 2放入正确的位置。
解决此问题的方法很多。
答案 4 :(得分：0)
你的问题很奇怪！你谈论一个选择（没有选择，悬停与选择不一样！），以及某种长度？ （你的意思是宽度？）
无论如何，您可以使用js定位任何内容：
在你的悬停功能中，你可以找到当前＆＃34; .myTarget＆＃34;的所有位置，用＆＃34;＃rightPanel＆＃34;更改this。并且您拥有右侧面板的所有位置：
var Top = $(this).offset().top;
var Left = $(this).offset().left;
var Width = $(this).outerHeight();
var Height = $(this).outerHeight();
var Bottom = Top + Height;
var Right = Left + Width;
注意：如果您希望在调整窗口大小时更改它，则需要切换到resize事件：
$(window).resize(function(){
//do stufff
})
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？