CODEWITHSUNDEEP
csstwitter-bootstraphover
Kaitlyn2004
Kaitlyn2004

Reputation: 3939

Change hover style within Twitter bootstrap?

I have this pure-CSS (display) solution for a follow button:

<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>

I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward. - Should I overwrite the A padding and shift it into the span? - Should I write the HTML differently? - Should I just toggle applicable text/style by JS? - Something else?

you can see the outer span has the class "following"

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

how would you accompliush that within the twitter bootstrap confines?

Upvotes: 0

Views: 854

Answers (1)

Matt Burgess
Matt Burgess

Reputation: 5018

Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.

Upvotes: 1

Related Questions