Javascript JQuery/CSS:div位置

我有一个

#hidden

div，当您将

#HoverMe div

悬停在它上面时，它会出现，取消悬停，然后再次隐藏。

#hidden

有其子div，其作用类似于dropdownlist。

#隐藏

使用

位置：绝对

。如何强制

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

这位车主总共拥有@Html.DisplayFor（model=>model.TotCar）汽车
// 如果弹出窗口的位置必须是绝对的，那么可以在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>


汽车
汽车信息1
汽车信息2
汽车信息3
var hoverEle=document.getElementById（“HoverMe”）；
var popupEle=document.getElementById（“隐藏”）；
hoverEle.addEventListener（'mouseover'，函数（）{
var hoverRect=hoverEle.getBoundingClientRect（）；//获取悬停元素的位置
popupEle.style.left=（hoverRect.right+16）+“px”；
popupEle.style.top=hoverRect.top+“px”；
popupEle.style.display=“block”；
}，假）；
hoverEle.addEventListener（'mouseout'，函数（）{
popupEle.style.display=“无”；
}，假）；
您对此有何看法：

HTML:



让我停下来！

这是隐藏的。
这是隐藏框中的另一个容器。

CSS:

#悬停框p{
背景：红色；
宽度：100px；
浮动：左；
保证金：0；
}
#悬停框：悬停#隐藏框{
显示：块！重要；
}
#隐藏盒{
背景：黄色；
宽度：100px；
浮动：左；
显示：无；
}
#内暗箱{
背景：橙色；
宽度：100px；
}
您是否尝试过
位置：相对；浮动：左？@LouysPatriceBesette在第一个分区中？是的，我有，然后我也会移动不，我是说
#hidden
div。。。见@Toaditoad的答案。。。他做对了@Nyprez，你能解释一下为什么你更喜欢使用JavaScript和一些绝对定位的解决方案而不是纯CSS吗？