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

你使用z-index的任何东西都必须有一个position属性。

我希望这有帮助！

Answer 2

您可以删除z-index es，然后更改

.three-cols a p:hover {
    background-color: #ecebeb;
}

到

.three-cols:hover {
    background-color: #ecebeb;
}

更新了小提琴：http://jsfiddle.net/pxD33/1/

Answer 3

<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。您可以安全地删除所有这些。

Answer 4

更新小提琴：Fiddle

只需将锚点的显示更改为阻止：

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

并将悬停类提供给非p：

.three-cols a:hover {
    background-color: #ecebeb;
}

Answer 5

正如@Terry所说，在display: block元素上设置three-cols a应该可以解决问题。

如果您希望文字左侧有“免费悬挂”图片，您还可以使用媒体对象。

只需添加以下规则

即可

display: block;
overflow: hidden;

到col-img和three-cols p。

您可以阅读有关媒体对象here的更多信息。

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

5 个答案: