Question

当您悬停#hidden时，我会显示#HoverMe div 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>

Answer 1

如果弹出窗口的位置必须是绝对的，您可以在javascript中添加eventlisteners来定位元素。类似的东西：

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

Answer 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;
}

JQuery / CSS：div职位

2 个答案: