JQuery / CSS:Div-overlay并不影响其他div的位置

时间:2016-10-08 11:51:07

标签: javascript jquery css asp.net-mvc

如何让div覆盖其他div(比如.. dropdownlist)而不影响其他div的位置?

当您悬停#hidden时,我会显示#HoverMe div div,将其取消并再次隐藏。 但那个div在徘徊时会移动其他div。

  1. 如何使hidden-div覆盖其他div?

  2. 如何让hidden-div不影响其他div位置?

  3. 它是怎么回事:

        ------    ------   ------
       |  1  |  |   2   | |  3   |  //#HoverMe div is not hovered
        ------   -------   ------
                 ______
        ------  |      |  -------   ------
        |  1  | |Affect| |   2   | |  3   |  ////#HoverMe div is hovered, affects others div positions
        ------  |      |  -------   ------
                 ------
    

    我想要什么

                 ______
        ------  |  No  |----   ------
        |  1  | |Affect| 2  | |  3   |  //Just overlay, without affecting others divs positions
        ------  |      |---   ------
                 ------
    

    我的代码:

    <script>
    $(document).ready(function(){
        $("#HoverMe").hover(function(){
            $("#hidden").css('display', 'block');
        }, function() {
            $("#hidden").css('display', 'none');
            }
        );
    
    });
    </script>
    

    我使用#HoverMe - div显示#hidden - div,其中包含我要显示的内容列表。

     <div id="HoverMe" >
         This owner own @Html.DisplayFor(model => model.TotCar) cars in total
     </div>              
    
     <div id="hidden" style="background-color: black"> //<------- hidden
         @foreach (var car in Model.Car) { 
             <div>@car.Name</div> 
          }
    </div>
    

1 个答案:

答案 0 :(得分:0)

position:absolute添加到#hidden div,它应该有效。