如何在悬停时显示div，而不是在页面上显示内容？

I have created the following

我创建了以下内容

CSS

.div_wrapper {
    float: left;
    width: 100px;
    background: 3333;
    margin: 15px;
    background: #cacaca;
    z-index: 1;
}
.div_two {
    display: none;
    height: 120px;
    background: #444;
    z-index: 999;
}
.div_one:hover .div_two {
    display: block;
}

HTML

<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>
<div class="div_wrapper">
    <div class="div_one">
        <img src="#" style="width: 100px; height: 100px;">
        <div class="div_two">description</div>
    </div>
</div>

When you hover over it shows the description, but it pushes the other divs further. I have tried giving the div_wrapper a fixed width, which fixes that problem but when the div2 appears it shows under the next div that is under it. I tried adding a z-index and it did not change anything. I need the div_two to show over the top of the divs that are below it and not change the layout.

当您将鼠标悬停在它上面时会显示描述,但它会进一步推送其他div。我试过给div_wrapper一个固定的宽度,这解决了这个问题,但是当div2出现时,它显示在它下面的下一个div下面。我尝试添加一个z-index,它没有改变任何东西。我需要div_two显示在它下面的div的顶部而不是更改布局。

4 个解决方案

#1

If you want white-space in the location of the object BEFORE hover, you would use visibility, not display.

如果您希望在悬停之前在对象的位置使用空格,则可以使用可见性,而不是显示。

visibility:hidden, instead of display:none

visibility:hidden,而不是display:none

and visibility:visible, instead of dislpay:block

和可见性:可见,而不是dislpay:阻止

#2

You should use position: absolute to position this div. Absolutely positioned elements do not take up space within their container preventing them from pushing other elements around.

你应该使用position:absolute来定位这个div。绝对定位的元素不占用容器内的空间,防止它们推动其他元素。

In most cases such as this, you will want to set the parent element to position: relative as well, so that the absolute element can be positioned relative to its parent instead of the whole document.

在大多数情况下,例如,您需要将父元素设置为position:relative,以便绝对元素可以相对于其父元素而不是整个文档定位。

http://jsfiddle.net/fcW66/7/

.div_one{
    position: relative;
}

.div_two {
    /* ... */
    position: absolute;
    width: 100%;
}

#3

You can use position: absolute; to accomplish this.

你可以使用position:absolute;实现这一目标。

Here's a fiddle http://jsfiddle.net/QbAzY/

这是一个小提琴http://jsfiddle.net/QbAzY/

#4

Add position:absolute; and width: 100px; to your .div_two rules

添加位置:绝对;和宽度:100px;你的.div_two规则

.div_two {
    display: none;
    height: 120px;
    background: #444;
    z-index: 999;
    position:absolute;
    width: 100px;
}

jsFiddle example

z-index only applies to positioned elements, so by setting position:absolute on your .div_two elements it not only allows the z-index to work, but it takes those elements out of the normal flow of the document and won't push the other divs down. Note that you also have two background rules on your .div_wrapper element, and a z-index rule that isn't doing anything.

z-index仅适用于定位元素,因此通过在.div_two元素上设置position:absolute,它不仅允许z-index工作,而且它将这些元素从文档的正常流程中取出并且不会推动其他人分崩离析。请注意,您的.div_wrapper元素还有两个后台规则,以及没有执行任何操作的z-index规则。

#1