我有一张可悬停的卡,我想让卡上的按钮也可悬停吗?
我已经尝试过了
<div class="card border-0" style="width: 100%;">
<img class="card-img-top" src="image here" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light text-left">
<h4>{{ ucwords(trans($group->group_title)) }}</h4>
<button type="button" class="btn btn-light btn-circle" data-toggle="tooltip" data-placement="top" title="Join the group"><i class="fa fa-star"></i></button>
</div>
<a href="{{ route('groups.show',$group->id)}}" class="stretched-link"></a>
</div>
但是btn btn-light btn-circle
不可悬停并且不显示工具提示吗?
我尝试将style="z-index:2"
添加到按钮上,但没有任何乐趣。
<div class="card border-0" style="width: 100%;">
<img class="card-img-top" src="image" alt="Card image">
<div class="card-img-overlay">
<div class="bottom text-light text-left">
<h4>{{ ucwords(trans($group->group_title)) }}</h4>
<br>
<h5>1,235 members</h5>
</div>
<button type="button" class="btn btn-light btn-circle" style="z-index:2" data-join-group="terms" data-toggle="tooltip" data-placement="top" title="Join the group"><i class="fa fa-star"></i></button>
</div>
<a href="{{ route('groups.show',$group->id)}}" class="stretched-link"></a>
</div>