在 Twitter 引导程序中更改悬停样式？答案

【问题标题】：Change hover style within Twitter bootstrap?在 Twitter 引导程序中更改悬停样式？
【发布时间】：2012-12-20 16:42:50
【问题描述】：

我有这个用于关注按钮的纯 CSS（显示）解决方案：

<span class="follow-status following">
    <a href="#" class="btn btn-follow" data-user-id="123">
        <span class="following-text"><i class="icon-ok"></i> Following</span>
        <span class="follow-text"><i class="icon-plus"></i> Follow</span>
        <span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
    </a>
</span>

例如，我想根据显示的内容更改悬停时的文本。然而，a 元素有填充，并且样式化 span 看起来真的很尴尬。 - 我应该覆盖 A 填充并将其转移到跨度中吗？ - 我应该以不同的方式编写 HTML 吗？ - 我应该只通过 JS 切换适用的文本/样式吗？ - 还有什么？

您可以看到外部跨度具有“以下”类

.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}

您将如何在 twitter 引导程序范围内实现这一点？

【问题讨论】：

为什么样式化 span 看起来很别扭？
例如，只有内部部分会获得背景颜色。外部将获得默认的灰色。并且背景颜色取决于显示的跨度/文本...

标签： css twitter-bootstrap hover

【解决方案1】：

就个人而言，我会从锚点内的跨度中删除所有填充/边距，并将您的 CSS 填充/边距等应用于锚点元素。这样你就可以在未来证明自己，以防你想在锚元素中添加不同的元素。

【讨论】：