Блог

Главная - Вопросы по программированию - jQuery / CSS: позиции div

jQuery / CSS: позиции div

#javascript #jquery #css #asp.net

#javascript #jquery #css #asp.net

Вопрос:

У меня появляется #hidden div, когда вы наводите #HoverMe 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>

Комментарии:

1. Вы пробовали position: relative; float: left; ?

2. @LouysPatriceBessette в первом div? Да, у меня есть, тогда #hoverMe тоже перемещается

3. Нет, я говорил о #hidden div… Смотрите ответ @Toaditoad… Он все понял правильно. 😉

4. @Nyprez, не могли бы вы пояснить, почему вы предпочитаете (и отмечаете как ответ) решение с использованием JavaScript и некоторого абсолютного позиционирования по сравнению с чистым CSS?

Ответ №1:

Если позиция всплывающего окна должна быть абсолютной, вы можете добавить eventlisteners в 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;
}