jQuery/CSS：div 位置答案

【问题标题】：JQuery/CSS: div positionsjQuery/CSS：div 位置
【发布时间】：2017-02-17 11:02:43
【问题描述】：

当您悬停#HoverMe div 时，会出现一个#hidden div，将其取消悬停并再次隐藏。 #hidden 有其子 div，其作用类似于下拉列表。 #hidden使用position: absolute;。如何强制#hidden div 出现在#HowerMe 旁边，并让它的子div（在#hidden div 内）出现在下面？

现在的情况：

                          ------------     
                         |  #HoverMe   |                            
                          ------------    
  ---------
 | #hidden |
 | --------|
 | car.name|        
 |---------|
 | car.name|  
  ---------

我想要什么

                      ------------     ---------
                     |  #HoverMe   |  | #hidden |                           
                      ------------    | --------|
                                      | car.name|        
                                      |---------|
                                      | car.name|  
                                       ---------

我的代码： 我使用我的#HoverMe-div 来显示#hidden-div，其中包含我想要显示的内容列表。

<div style="position: relative">
     <div id="HoverMe" >
         This owner own @Html.DisplayFor(model => model.TotCar) cars in total
     </div>              

     <div id="hidden" style="position: absolute; background-color: black"> //<------- hidden
         @foreach (var car in Model.Car) { 
             <div>@car.Name</div> 
          }
    </div>
 </div>

【问题讨论】：

你试过position: relative; float: left;吗？
@LouysPatriceBessette 在第一个 div 中？是的，我有，然后#hoverMe 也会移动
不，我说的是#hidden div...请参阅@Toaditoad 的回答...他说对了。 ;)
@Nyprez，您能否详细说明为什么您更喜欢（并标记为答案）使用 JavaScript 的解决方案和一些绝对定位而不是纯 CSS？

标签： javascript jquery css asp.net

【解决方案1】：

如果弹出窗口的位置必须是绝对的，您可以在 javascript 中添加事件监听器来定位元素。比如：

<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="position: absolute; background-color: lightgray; display: none">
        <div>Car Info 1</div>
        <div>Car Info 2</div>
        <div>Car Info 3</div>
    </div>
</div>

<script>
    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");

    hoverEle.addEventListener('mouseover', function () {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";

    }, false);

    hoverEle.addEventListener('mouseout', function () {
        popupEle.style.display = "none";
    }, false);
</script>

【讨论】：

【解决方案2】：

您对此有何看法：https://jsfiddle.net/Lnw832L3/

HTML：

<div id="hoverBox">
    <p>
        Hover me!
    </p>
    <div id="hiddenBox">
        This is hidden.
        <div id="insideHiddenBox">
            This is another container inside the hidden box.
        </div>
    </div>
</div>

CSS：

#hoverBox p {
    background: red;
    width: 100px;
    float: left;
    margin: 0;
}

#hoverBox:hover #hiddenBox {
    display: block !important;
}

#hiddenBox {
    background: yellow;
    width: 100px;
    float: left;
    display: none;
}

#insideHiddenBox {
    background: orange;
    width: 100px;
}

【讨论】：