html - 在悬停背景颜色覆盖图像时，z-index 没有任何效果

Question

当您将鼠标悬停在 JS Fiddle 中的段落文本上时，图像会被背景覆盖。在我能想到的任何地方使用 z-index 都没有任何效果。 (我把无用的 z-index 东西留在了那里，所以向你展示了我的尝试。)我还在不同的地方尝试了 pointer-events: none;。

我也尝试过这种类型的东西 elm1:hover elm2{}，但这没有帮助。我是 CSS 的新手，我正在应用我搜索和发现的内容。

编辑:问题:悬停时背景颜色覆盖图像

标记:

<div id="col2-middle" class="three-cols-middle three-cols"> 
    <a href="About.php#how-we-work- projects">
        <h1 class="h-big-font">Specific Projects</h1>
        <img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
            <p class="p-on-white"> 
                           XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX                                       XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                <br/>
                <br/>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </p>
    </a>
</div>

CSS:

div.three-cols {
    float: left;
    width: 29.33%;
    position: relative;
    left: 70.67%;
    overflow: auto;
    padding: 1% 1% 1% 1%;
    min-width: 200px;
    z-index:-1;
}
.three-cols a {
    position: relative;
    text-decoration: none;
    color: #000;
}
.three-cols a p:hover {
    background-color: #ecebeb;
}
.col-img {
    float: left;
    padding: 4%;
    z-index: 1;
}
.three-cols h1 {
    margin-bottom: 2%;
    text-align: center;
}
.three-cols p {
    padding: 0.5% 0 3% 0;
    z-index: -1;
}
p {
    word-wrap: break-word;
    color: #000;
    margin: 0;
    padding: 10px 20px;
    font-size: 16px;
}

这是我的演示: http://jsfiddle.net/pxD33/

PS - 需要在 CSS 和 HTML 中进行响应和解决。

Answer 1

<a>默认情况下是行内元素。一旦你设置 display: block它解决了这个问题。

.three-cols a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #000;
}

http://jsfiddle.net/teddyrised/pxD33/2/

p/s: 你不需要 z-index对于你的情况。您可以安全地删除所有这些。