html - Bootstrap 链接悬停效果不显示

Question

我正在关注 this tutorial使用 Bootstrap 设置链接样式，但是当我将 badge badge-info 类添加到 a 标签时，当我将鼠标悬停在它上面时，它不会显示悬停效果鼠标，它只是改变了背景颜色。代码(它有一些 Vue.js):

<div class="mask">  
    <div class="mask-content">
        <h5>{{anime.title}}</h5>
        <!-- The link with the problem  -->
        <a class="badge badge-info text-white">Read More...</a>
    </div>
</div>

问题:如何解决这个问题并显示悬停效果？

Answer 1

您将不得不使用 href 属性来使用来自 Bootstrap 的自然悬停效果。以下是执行此操作的几种方法:

<a class="badge badge-info text-white" href="javascript:;">Read More...</a>

<!--FYI.. This will cause the page to jump to the top -->
<a class="badge badge-info text-white" href="#">Read More...</a>