web-dev-qa-db-fra.com

CSS: focus ne fonctionne pas

J'ai essayé d'utiliser la pseudo-classe :focusCSS dans mon projet. Je veux changer la couleur de l'élément où je clique dessus. Désormais, lorsque je clique sur mon élément, il ne change de couleur que là où il est actif et, après le passage de la souris, il reprend son ancienne couleur. Après un second clic, je veux revenir à l'ancienne couleur. J'utilise Chrome.

Démo ici

.row {
  display: inline-block;
  border: 1px solid grey;
  height: 200px;
  width: 200px;
  line-height: 1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}
.row:active,
.row:focus {
  background: orange;
}
<div id="main" class="container">
  <div class="row" id="row0">
  </div>
</div>

csscss3google-chromepseudo-class
5
DanteVoronoi

Si vous voulez un véritable état de focus sur un élément div, vous pouvez lui ajouter un attribut tabindex.

.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row:active, .row:focus { background: orange; }
 
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

Si vous souhaitez basculer la couleur en cliquant sur le même élément div, vous devez utiliser javascript (jQuery):

jQuery('#row0').click(function() {
  $(this).toggleClass('orange');
});
.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row.orange { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>

19
Andy Tschiersch

.row {
  display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}

.row:active, .row:focus { background: orange; opacity:1 }
<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

S'il vous plaît essayez ceci ...

0
vishnu

Vous pouvez émuler l'effet de bascule avec une astuce CSS en ajoutant une entrée de case à cocher masquée. 

Voir ici

HTML:

<div id="main" class="container">
  <input type="checkbox" />
  <div class="row" id="row0">
  </div>
</div>

CSS:

.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }
0
Vincent G

Ce que vous cherchez, c'est :visited, mais cela ne fonctionne pas sur un div. Vous devriez utiliser la balise a- (y compris href="#").

.row:active, .row:visited { background: orange; }

Vérifiez le violon ci-dessous:

http://jsfiddle.net/uuyNH/32/

Edit: La réponse de Vincent G semble faire plus que ce que vous voulez, puisque vous pouvez supprimer la couleur de fond en cliquant dessus.

0
Rvervuurt