我怎么做元素进入锚标记不需要点击?

Question

我有一张卡片，由于anchor标签，这张卡片是可点击的

<a href="{{ route('frontend.adv.show', $item->id) }}" class="card">
<div class="card-img"
style="background-image: url({{ $item>getFirstMediaUrl('advertisement_images', 'thumb-medium') }})">

<button class="favorites">
<img src="{{ asset('frontend/img/favorites.svg') }}" alt="favorites icon">
</button>
</div>
</a>

我需要button必须不可点击，但button之外(进入anchor)必须可点击。现在它们都发出咔哒声了。我尝试了z-index，但它不起作用。

Css (Sass)

.card {
width: 252px;
height: 288px;
background: #f9fafb;
border-radius: 4px;
position: relative;
z-index: 1;

.card-img {
width: 100%;
height: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;  
.favorites {
position: absolute;
z-index: 11111;
right: 12px;

}
}
}

Answer 1

z-indexoverlay

• 添加一个div，位于锚
的之外
• 为div指定以下样式(当然长度可能不同)

.overlay {
position: relative;
z-index: 1;
top: -58px;
width: 60px;
height: 54px;
border: 3px dashed red;
}

<a href="https://example.com" class="card">
<div class="card-img" style="background-image: url(https://i.ibb.co/YPyQyFr/bar.png)">
<button class="favorites">
<img src="https://cdn2.iconfinder.com/data/icons/weby-flat-vol-1/512/1_favorite-red-heart-1024.png" alt="favorites icon" width='48' height='48'>
</button>
</div>
</a>
<div class='overlay'></div>

你几乎对z-index有了正确的想法，除了为了超越另一个标签(比如锚)，你需要一个不是后代的标签，即在锚的外面而不是里面。