在任何地方將滑鼠懸停在 Bootsrap 中的卡片上時，如何獲得按鈕焦點。目前，按鈕焦點需要將滑鼠懸停在按鈕上。將滑鼠懸停在卡片中的任何位置后，我想獲得照片二中的效果。
代碼：
<style>
.hovernow {
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 35px rgba(0, 0, 0, 1);
border:2px solid #3E7DC0;
}
</style>
<div class="col-sm-6 col-xl-3">
<a href="#">
<div class="bg-body hovernow rounded-3 text-center p-2 position-relative" style="border:2px solid #6f42c1;">
<!-- Image -->
<img src="{% static 'assets/images/persons/5.png' %}" class="img-fluid mb-3" alt="">
<button class="btn btn-primary-soft text-white w-100">Age: 18-24</button>
</div>
</a>
</div>
uj5u.com熱心網友回復：
你不能button在a標簽中使用。不，根據W3C 的 HTML5 規范檔案，它不是有效的 HTML5 ：
試試這樣：
<div class="col-sm-6 col-xl-3">
<a href="#">
<div class="bg-body hovernow rounded-3 text-center p-2 position-relative" style="border:2px solid #6f42c1;">
<!-- Image -->
<img src="{% static 'assets/images/persons/5.png' %}" class="img-fluid mb-3" alt="">
<span class="btn btn-primary-soft text-white w-100">Age: 18-24</span>
</div>
</a>
</div>
uj5u.com熱心網友回復：
我認為您需要一些 JS 來將按鈕焦點設定在懸停上。也許是這樣的：
$(document).ready(function(){
$('div.hovernow').mouseover(function(){
$(this).children().closest('button').focus();
});
});
uj5u.com熱心網友回復：
在這里，您可以使用.stretched-link引導類。您的代碼應如下所示。
<div class="col-sm-6 col-xl-3">
<div class="bg-body hovernow rounded-3 text-center p-2 position-relative" style="border:2px solid #6f42c1;">
<!-- Image -->
<img src="{% static 'assets/images/persons/5.png' %}" class="img-fluid mb-3" alt="">
<a href="#" class="btn btn-primary-soft text-white w-100 stretched-link">Age: 18-24</a>
</div>
</div>
請在此處閱讀引導檔案以獲取更多資訊：拉伸鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/425603.html