我有一些我无法控制的 HTML,但我想看看我是否可以以这种方式设置样式以实现特定的输出。我有一个链接,其中有一个带有链接的 child 。我有一个链接的同级标题,但它绝对位于链接的中间。当将鼠标悬停在链接上时,您可以单击它,但是当您将鼠标悬停在标题元素上时,您无法单击该链接(因为它不是 <a>
的子元素,而是兄弟元素)。显然,如果标题是 <a>
的后代, 我没问题。
是否有任何选项可以让我实现我想要的输出?正如我所说,我正在设置样式的 HTML 无法编辑。下面的 HTML 和 CSS。
最终我希望标题位于链接上方,但仍然允许点击整个链接,无论是否将鼠标悬停在标题上。
<div id="" class="grid-square">
<a href="# class="widget_sp_image-image-link">
<img width="1920" height="1080" class="attachment-full" style="max-width: 100%;" src="...">
</a>
<div class="title">
<p>TITLE</p>
</div>
</div>
.home-grid .grid-square, .home-grid .grid-rectangle-half {
background-color: #000;
display: block;
font-size: 100%;
margin-bottom: 30px;
overflow: hidden;
position: relative;
}
.home-grid img {
height: 100%;
position: absolute;
width: 100%;
}
.home-grid .title {
color: #fff;
font-size: 4.8em;
font-weight: 600;
font-family: "proxima-nova-alt-condensed";
left: 0;
margin-bottom: 0;
margin-top: 0;
position: absolute;
top: 50%;
text-align: center;
width: 100%;
z-index: 1;
}
最佳答案
您可以设置属性 pointer-events在标题类中设置为无,表示您希望鼠标事件通过标题并指向下面的链接。
在以下代码段中,您可以向下滚动页面并单击标题或图像以返回到文档顶部。
p {
margin: 0 ;
}
.grid-square {
position: relative ;
width: 300px ;
height: 800px ;
line-height: 800px;
}
.home-grid img {
position: absolute;
width: 100%;
height: 100%;
}
.home-grid .title {
position: absolute;
pointer-events: none;
color: #fff;
font-size: 4.8em;
font-weight: 600;
font-family: "proxima-nova-alt-condensed";
width: 100%;
text-align: center;
vertical-align: middle;
z-index: 1;
}
<div class="home-grid">
<div class="grid-square">
<a href="#top" class="widget_sp_image-image-link">
<img class="attachment-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/550px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg">
</a>
<div class="title">
<p>TITLE</p>
</div>
</div>
</div>
关于html - 链接顶部的绝对定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39319230/