我怎样才能把元素放入锚标签中，而不必点击？

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索引，但不起作用。

社联(社联)

     .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-index覆盖

• 添加位于锚
• 外部的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，您几乎有了正确的认识，除了为了超越另一个标记(比如锚)，您需要一个不是后代的标记，而不是在锚内。