CODEWITHSUNDEEP
csstwitter-bootstrap
Cole Roberts
Cole Roberts

Reputation: 984

Twitter Bootstrap button transition

I'm experiencing a rather annoying conflict with Twitter Bootstrap.

When I mouse over a button the CSS transition only plays on hover out.

Here's my CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.btn-click-me {
    color: white !important;
    background: black !important;
    -webkit-transition: background linear 350ms;
}

.btn-click-me:hover {
    background: white !important;
}

A working JFiddle demo can be seen here: As seen here: http://jsfiddle.net/MgcDU/3805/

Upvotes: 2

Views: 7659

Answers (2)

Misanthrope
Misanthrope

Reputation: 117

Its a specificity issue in bootstrap.css - by default all buttons have a transition - all you need to do is include the .container class in your selector and you'll override bootstrap and see the expected transition in both states. You can alternatively modify the default transition by going to line 3246 of bootstrap.css, the transition is on the .btn:hover, .btn:focus classes

The reason two classes overrides two classes in this case is because when using the @import conditional rule, the imported CSS precedes the CSS you've written in your jsFiddle. If two selectors have the same specificity the latest one declared in the stylesheet will win

Example

By two classes I'm referring to: .container .btn-click-me and .btn:hover, btn:focus which are equally specific

Upvotes: 2

Romain
Romain

Reputation: 1948

if you want to review the transition on hover in and on hover out, add the transition even on the over state: http://jsfiddle.net/MgcDU/3821/

CSS

    @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

.btn-click-me {
    color: white;
     -webkit-transition: background linear 350ms;
    background: black;

}

.btn-click-me:hover {
 -webkit-transition: background linear 350ms;
    background: white ;
}

Upvotes: 0

Related Questions