Non modificare CSS quando il mouse sopra il pulsante di bootstrap

Sto usando un btn-group come questo: http://jsfiddle.net/dy9uH/34/Non modificare CSS quando il mouse sopra il pulsante di bootstrap

Non voglio i miei utenti a pensare che il pulsante a sinistra è click-in grado, ma non mi piace come il il pulsante appare quando aggiungo la classe disabled. Come posso assicurarmi che non accada nulla quando un utente passa il mouse sul pulsante sinistro? Preferirei non modificare bootstrap.css perché ho altri pulsanti che utilizzano la classe .btn-group che ho bisogno di funzionare come al solito.

fonte

2013-02-19 Xecure

Penso che l'unica soluzione sia superare gli stili di bootstrap con le modifiche personalizzate.

aggiungere una classe personalizzata per la btn es: special
definire lo stile di sostituzione come segue in un file CSS personalizzato
Includere il file personalizzato nella tua pagina

Css:

.btn.special { 
    background-color: #F5F5F5; 
    color: #333333; 
    background-image: linear-gradient(to bottom, #FFFFFF, #E6E6E6); 
    text-decoration: none; 
    background-position: 0; 
    transition: none; 
}

Demo: Fiddle

fonte

2013-02-19 03:19:25

Funziona molto bene. Un piccolo problema che sto avendo è che quando si fa clic sul pulsante, il CSS cambia e passa allo stile c: 'active' o': focus' css. Ho modificato leggermente il CSS per neutralizzarlo, ma non funziona ancora: http://jsfiddle.net/dy9uH/14/ Qualche idea sul perché? – Xecure

Prova questo violino http://jsfiddle.net/dy9uH/16/ (Aggiunto 'box-shadow: none;') –

Ma questo cambia lo stile del pulsante quando non è ': active' o hovering. Altre idee? – Xecure

-2

Bene, è possibile aggiungere una classe a quel particolare pulsante, in modo che non si blocchi con gli altri, e riscrivere la classe disabilitata, che sarebbe il modo più semplice.

fonte

2013-02-19 02:48:15

Questo in realtà non risponde alla domanda. – lanoxx

Presumo che si desideri utilizzare anche disabilitato, quindi il pulsante è effettivamente disabilitato. Sarà necessario sostituire alcuni bootstrap

vorrei fare le seguenti

HTML

<div class="btn-group"> 
    <button class="btn special" disabled>I'm Special</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
    </ul> 
</div>

CSS

.special, 
.special.disabled, 
.special[disabled] 
.special.disabled:hover, 
.special[disabled]:hover, 
.special.disabled:focus, 
.special[disabled]:focus { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 12px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    font-size: 14px; 
    line-height: 20px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #f5f5f5; 
    *background-color: #e6e6e6; 
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)) !important; 
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6) !important; 
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6) !important; 
    background-repeat: repeat-x !important; 
    opacity: 1 !important; 
    filter: alpha(opacity=100) !important; 
    background-position: 0 0; 
    -webkit-transition:none; 
    -moz-transition:none; 
     -o-transition: none; 
      transition: none; 
    border: 1px solid #cccccc; 
    *border: 0; 
    border-color: #e6e6e6 #e6e6e6 #bfbfbf; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    border-bottom-color: #b3b3b3; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 
    *zoom: 1; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 
}

Nota i disabled selettori.

TUTTAVIA non dovrebbe sorprendere nessuno che questo sia supportato solo parzialmente in IE!

Fiddle

fonte

2013-02-19 03:32:54

Non modificare CSS quando il mouse sopra il pulsante di bootstrap

risposta

Problemi correlati