Question

Div包含者和p元素与另一个Div重叠，其中包含需要响应:hover CSS事件的图片，该事件仅导致{{1}的一小部分容器能够感知鼠标悬停在它上面。

我该如何解决这个问题？
Div也因某些原因无效。
尝试将鼠标悬停在图像上。

Answer 1

正如@colandus所说，将position: relative和z-index添加到img确实可以解决问题。

然而，在我看来，你似乎已经过度复杂化了一些事情。为什么位置相对于p？那是造成问题的那个......

如果你使用一些更简单的html / css，你要做的是默认行为。像这样：

HTML ，删除了一些div：

<div class="insp">
    <h3>Thomas Edison</h3>
    <img src="http://www.placehold.it/250x150">
    <p>Lorem Ipsum is s...</p>
</div>

以及从position: relative移除p的 css ：

.insp {
    border: 2px solid black;
    margin: 10px 0px;
    padding:10px;
}
.insp h3 {
    margin-top:0px;
    background-color:#FFDE5C;
}
.insp img {
    float:left;
    border: 5px solid #FFDE5C;
    height:150px;
    margin: 0 20px 20px 0;
}
.insp img:hover {
    border: 5px solid #ffffff;
}
.insp p {
    margin: 40px 40px 40px 80px;
}

正如您所见（http://jsfiddle.net/7fvcD/4/），它看起来完全相同，并且不再有悬停问题。

Answer 2

将图片设为position: relative，然后z-index即可。

Answer 3

添加以下CSS：

.insp-image img {
    position: relative;
    z-index:1000;
}

http://jsfiddle.net/7fvcD/5/

不需要更改标记;）

Answer 4

尝试这种方法：将<div>与<img>放在<p>标记内，并为img div设置一些边距。

Updated JsFiddle

重叠元素Div元素

4 个答案: