0

フォローボタン用のこの純粋な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 要素にはパディングがあり、スパンのスタイル設定は非常に厄介に見えます。- 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のブートストラップの範囲内でそれをどのように達成しますか?

4

1 に答える 1

1

個人的には、アンカー内のスパンからすべてのパディング/マージンを削除し、CSS パディング/マージンなどをアンカー要素に適用します。そうすれば、アンカー要素内にさまざまな要素を追加したい場合に備えて、将来的に自分自身を証明できます。

于 2013-01-06T23:46:05.190 に答える