当您将鼠标悬停在 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 中进行响应和解决。
最佳答案
<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
对于你的情况。您可以安全地删除所有这些。
关于html - 在悬停背景颜色覆盖图像时,z-index 没有任何效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23274487/