html - 重叠元素 Div 元素

Question

Div 容器和 p 元素重叠另一个包含需要响应 :hover 的图像的 Div > CSS 事件仅导致该 Div 容器的一小部分能够感知鼠标悬停在其上。

• 我该如何解决这个问题？
• z-index 也因为某些原因无效。
• 尝试将鼠标悬停在图片上。

Here Is The JSFiddle.

Answer 1

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

但是，在我看来，您似乎把事情复杂化了一点。为什么相对于 p 的位置？这就是导致问题的原因......

如果您使用一些更简单的 html/css，您尝试做的是默认行为。像这样:

删除了一些 div 的 HTML:

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

和 css 从 p 中移除了 position: relative:

.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/ )，它看起来完全一样，并且不再有悬停问题。