HTML/CSS：部分被其他图片链接覆盖的图片链接不可点击

我有两个包含标签的标签。它们相对定位，一个具有负Z指数，出现在另一个之后。虽然它们被抵消了，所以在下面的链路上有很多可见区域。下面的链接不可点击，并且不会注册CSS悬停。我可以在网上找到的大多数建议将覆盖元素设置为“指针事件：无”，但是我的覆盖元素也是一个链接，所以我仍然希望它是可点击的。HTML/CSS：部分被其他图片链接覆盖的图片链接不可点击

编辑：的jsfiddle示范问题：https://jsfiddle.net/cfbxz7pb/

<div style="position: relative"> 
 

 
<a href="http://www.google.com" style="position: relative"> 
 
    <img style="width: 150px" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: -5"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.twitter.com" style="position: relative; left:-120px"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(120deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 

 
</div>

来源

2016-06-12 Nick

您可以添加HTML和CSS，也许小提琴？你真的需要一个负面的'Z-索引'吗？ – insertusernamehere

发布重现问题的工作代码片段 – LGSon

如果较小的div如果在底下甚至可以看到，它又如何显示？如果它在上面，它应该是可点击的。 – warkentien2

你的第二个链接/圈有-5的z-index将始终把它放在别的（除非你使用一个连降低Z指数）。使第二个链接/圆形z-索引至少为0，但是比其他两个圆圈高得多;在这种情况下，我使用了z-index：2。

我建议这样的：

<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 2">

并添加CSS定义所有的一HREF中显示为：inline-block的是这样的：

a { 
    display: inline-block; 
}

另一种方式做，这是创建三个的div和使它们的边界半径为100％，这样它们的重叠实际上是圆形的，而不是由内部的href和png图像创建的正方形。

来源

2016-06-12 18:49:11

你是对的，非常感谢 – Nick

<div style="position: relative"> 
 

 
<a href="http://www.google.com" style="position: relative; z-index: 77;"> 
 
    <img style="width: 150px; " src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.facebook.com" style="position: relative; left:-60px; z-index: 0"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(80deg)" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 
<a href="http://www.twitter.com" style="position: relative; left:-120px; z-index: 0"> 
 
    <img style="width: 150px; -webkit-filter: hue-rotate(120deg);" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"> 
 
</a> 
 

 
</div>

来源

2016-06-12 19:05:58 Zohaib

HTML/CSS：部分被其他图片链接覆盖的图片链接不可点击

回答

相关问题