web-dev-qa-db-fra.com

état survol/focus du bouton bootstrap 3

L'état de survol des boutons de Bootstrap 3 est exactement le même avec son état de focus.

Est-ce qu'il y a une façon de changer cela? Je sais que ce n'est qu'un problème esthétique, mais je souhaite que l'état de survol disparaisse lorsque la souris survole, tout en ayant une autre caractéristique distincte, à savoir que le bouton a le focus.

Je ne sais pas s'il s'agit du problème de mon navigateur ou s'il est vraiment destiné (ou un bug?).

J'utilise Chrome plus tard. (Version 34.0.1847.131 m)

Lien vers des exemples de boutons Bootstrap 3 . http://getbootstrap.com/css/?#buttons-tags

Cliquez sur le 3ème bouton intitulé "Entrée" et déplacez la souris vers l'extérieur.

-

Mettre à jour:

J'ai essayé de remplacer les styles de focus/survol par défaut, mais le bouton est maintenant bloqué dans l'état de focus, même lorsque vous passez la souris dessus. Y a-t-il un moyen de surmonter cela? Il semble que l’état de focus ait une priorité plus élevée dans les styles que le survol.

-- Merci pour les pointeurs, mecs . Pour le comportement prévu pour avoir toujours un état de survol distinct malgré la mise au point, l'état de survol devait être redéfini.

Le css que j'ai ajouté est allé comme ceci:

.btn-default:focus,
.btn-default:active,
.btn-default.active
{
  background-color: #ffffff;
}

.btn-default:hover
{
  background-color: #ebebeb;
}
javascripthtmlcsstwitter-bootstrap-3
6
kerafill

Vous pouvez remplacer les styles de bootstrap. Assurez-vous d'abord que votre feuille de style ou votre déclaration de style est ajoutée après le bootstrap, par exemple:

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="/stylesheets/styles.css">

Puis dans votre css:

.btn:focus {
  background-color: red;
}
8
Vinnie Pepi

Au lieu de remplacer les styles, créez simplement l'événement click .blur () à partir de jquery .

1
Dan

Quiconque cherche Bootstrap 4, essayez ceci dans votre fichier CSS de style personnalisé

.btn-dark:hover, .btn-dark.active {
   background: #31bda5;
   box-shadow: none;
}
1
terminali