我试图通过在其<a>周围放置一个锚标记来使整张卡片可点击，但锚似乎超出了卡片区域，如下面的蓝绿色区域所示。
HTML
<div class="post-slider">
<div class="post-wrapper">
<a class="text-light bg-info mx-2" style="text-decoration: none; height: 100%; width 100%" href="#">
<div class="course-card col-lg-10 col-md-6 p-0 my-2 mx-4" style="width: 300px; height:280px;">
<div>
<img src="../images/courses/<?php echo $courseImage; ?>" class="img-fluid">
<div class="pl-3">
<div class="mt-3"><?php echo $courseName; ?></div>
<div class="text-secondary pl-3" style="position: absolute; bottom: 0;">
<div class="row align-items-center">
<div class="ml-2">
<div><small>John Doe</small></div>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
CSS
.post-slider {
margin: 0px auto;
position: relative;
}
.post-slider .post-wrapper {
width: 100%;
height: 350px;
margin: 0px auto;
overflow: hidden;
}
.post-slider .post-wrapper .post {
height: 350px;
width: 300px;
margin: 0px 10px;
display: inline-block;
}
.course-card {
border: 1px solid rgb(40, 40, 40);
background-color: rgb(22, 22, 30);
}
如果我将锚标记移动到第一个 div 下方，它可以正常工作，但图像下方的任何空白区域都无法再点击，只有文本和图像可以。
我怎样才能使卡片区域只能点击，但它的内容包括空白区域。