的JQuery/CSS：DIV位置

我一直當你鼠標懸停在一個#HoverMe div，unhover並再次將其隱藏了#hidden DIV出現。該#hidden有其子DIV它像一個下拉列表。 #hidden使用position: absolute;。如何強制#hidden div出現在#HowerMe旁邊，並讓其子div（在#hidden div內）出現在？的JQuery/CSS：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>

來源

2016-10-08 Nyprez

你有沒有tryed'的位置是：相對的; float：left;'？ –

@LouysPatriceBessette在第一個div？是的，我已經，然後#hoverMe移動以及 – Nyprez

不，我說的是'＃DIV hidden' ...查看@ Toaditoad的答案......他是正確的。 ;） –

如果彈出窗口的位置必須是絕對位置，則可以在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>

來源

2016-10-08 16:48:54 4lk4tr43

你覺得這是什麼：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; 
}

來源

2016-10-08 16:50:54 Toaditoad

的JQuery/CSS：DIV位置

回答

相關問題