如何使 div 位于所选元素的右侧？

Question

我有两个面板，左边和右边。一旦用户将鼠标悬停在右侧面板的任何元素上，一个新的 div（称为框）应该在悬停元素的右侧可见。

我可以设计它，但问题是由于宽度是固定的，弹出面板的位置会根据屏幕的大小而变化。它在 JSFiddle 上不能正常工作，所以我没有把它放在那里，但是，提供了完整的代码，可以在任何浏览器中正常工作。

请注意两个面板都在 'container' 中。
即使屏幕尺寸发生变化，红色框也应保留在右侧面板上。（屏幕截图中显示的位置）
由于移动设备屏幕小，因此不会显示红框。

职位

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>

我想这就是丹尼尔想要的

None的元素悬停

元素 1 悬停，因此元素的红框将显示在其右侧。

元素2悬停，所以元素2的红框会显示在右边。

Answer 1

您可以获得鼠标的位置并使用该信息来放置第二个 div。

    getMousePosition: function(){ 
        var xOffset = event.pageX;
        var yOffset = event.pageY;
        //////////////console.log("xOffset: " + xOffset);
        //////////////console.log("yOffset: " + yOffset);
    }, //. getMousePosition

或者您可以将 div 放在开头的正确位置，然后将 "display:none" 应用到第二个 div。然后在需要时将其打开 "display:block;"。如果需要，在调用时用 ajax 插入的内容填充 div2。

或者您可以获得 div 1 左上角的位置，并使用该信息通过 javascript 调整将 div 2 放置到正确的位置。

解决这个问题的方法很多。

Answer 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 鼠标悬停

Answer 3

首先，您有两个具有相同 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>

Answer 4

你的问题很奇怪！你说的是 selection（没有什么 selected，hover 和 select 不一样！），以及某种长度？（你是指宽度吗？）

无论如何，你可以用js随意定位任何东西：在您的悬停功能中，您可以找到当前“.myTarget”的所有位置，将 this 更改为“#rightPanel”，您将拥有 rightPanel 的所有位置：

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;

注意：如果您希望它在调整 window 大小时发生变化，您需要切换到调整大小事件：

$(window).resize(function(){
    //do stufff
})

Answer 5

我刚刚复制了您的代码并进行了更改。
将所有 css 元素移动到 css 文件中！！！！
将 Box 从 id 更改为 class.
将 leftPanels 位置设置为相对位置。
设置方框css：position:absolute； display:none;z-index:1000;left:100%;
在鼠标悬停时简单地显示当前 "myTarget" 中的 "box"。
如果需要，请将 with 设置为 "rightPanel" 的 with！

代码如下：

            <!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>

如何使 div 位于所选元素的右侧？

How to make a div be to the right of selected element?

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3

编辑 1