Question

我有两个包含标签的标签。它们相对定位，一个具有负z-指数，以显示在另一个之后。它们是偏移的，因此下部链路上有足够的可见区域。下部链接不可点击，也不会注册CSS悬停。我在网上找到的大部分内容建议将覆盖元素设置为＆＃34; pointer-events：none＆＃34;，但是我的覆盖元素也是一个链接，所以我仍然希望它是可点击的。

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

＆＃13;

<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>

＆＃13;

Answer 1

你的第二个链接/圈子的z-index为-5，它总是把它置于其他任何东西之外（除非你在它旁边使用更低的z-index）。使第二个链接/圆z-index至少为0，但明确高于其他两个圆;我在这种情况下使用了z-index：2。

我推荐这个：

$('#test_input').val('xyz');
$('#test_input').scope().$apply();
$('#test_input').scope().test_value;
-> 'abc';

并添加css将所有href定义为display：inline-block，如下所示：

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

另一种方法是创建三个div并使它们成为border-radius：100％，这样它们的重叠实际上是圆形，而不是由a href和png图像创建的正方形。

Answer 2

＆＃13;

<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>

＆＃13;

HTML / CSS：另一个图像链接部分覆盖的图像链接不可点击

2 个答案: