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

标签 html css hover bootstrap-4 frontend

我正在关注 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>

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

最佳答案

您将不得不使用 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>

关于html - Bootstrap 链接悬停效果不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51827570/

相关文章:

php - 有一个图像,当点击到 mySQL 查询的变量时发送信息

html - 将本地作品移动到服务器时出现字体问题

html - 为什么CSS float 要给子元素添加边距?

javascript - 悬停时更改边距但保持元素静止

css - 使用 bootstrap 4 在移动设备中查看时如何隐藏文本链接

html - 如何动态调整导航选项卡的宽度以使其填满屏幕

javascript - 如何将现有淡入淡出效果代码应用于新元素

CSS 悬停在 li child 上

javascript - 您如何缩小内部和数组的 promise 功能?

html - 在 IE 和 Firefox 上显示不一致