travaux actifs mais pas de mise au point ou de cible en utilisant css

Donc, ci-dessous est mon code. La commande "active" dans le bloc css fonctionne car lorsque vous cliquez sur la div, elle change de couleur mais quand vous relâchez le clic, sa bordure devrait devenir rouge comme indiqué dans la commande "target" dans le bloc css mais ce n'est pas le cas. Des idées?travaux actifs mais pas de mise au point ou de cible en utilisant css

<html> 
<body> 

<style type="text/css"> 
.svar-grid { 
    margin: 20px; 
} 

.svar-grid .svar { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid black; 
    border-radius:10px; 
    background:yellowgreen; 
} 


.svar-grid .svar:active { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid black; 
    border-radius:10px; 
    background:green; 
} 

.svar-grid .svar:target { 

    padding: 10px; 
    text-align: center; 
    margin-top:20px; 
    width:100%; 
    border:2px solid red; 
    border-radius:10px; 
    background:green; 
} 

</style> 

<html> 
<div> 
     <div class="svar-grid"> 
      <div class="svar"><h4>Testing</h4></div> 
     </div> 

    </div>

Source

2017-07-17 user5095266

Je pense que vous êtes confus à ce que la cible fait, https://developer.mozilla.org/en-US/docs/Web/CSS/:target – Huangism

Vous êtes à la recherche de :focus.

https://jsfiddle.net/s0L716zu/

HTML

<div class="svar-grid"> 
     <div class="svar" tabindex="-1"><h4>Testing</h4></div> 
    </div>

CSS

.svar-grid .svar:focus { .... }

Comme vous pouvez le voir, j'ajouté tabindex="-1" à la div parce qu'un div est pas naturellement focalisable. Lui donnant -1 tabinde fait est focalisable

Voici ce que :target est censé faire https://developer.mozilla.org/en-US/docs/Web/CSS/:target, il est destiné à être utilisé avec l'URL

Je ne sais pas pourquoi vous avez besoin se concentrer sur la div ou si toute interaction avec elle. Mais s'il y a une interaction avec la div, vous devriez probablement utiliser button ou une balise d'ancrage en fonction de son utilisation

Source

2017-07-17 19:16:24 Huangism

:target applique aux éléments avec un attribut id qui correspond à la chaîne qui apparaît après le premier caractère # dans l'URL. C'est ce que lorsque vous vous connectez à quelque chose de spécifique sur une page, il peut être mis en évidence pour attirer l'attention.

Étant donné que l'élément n'a pas de id, la pseudo-classe :target ne peut pas s'appliquer.

:focus s'applique aux éléments qui ont le focus. Cliquer sur un élément lui donnera généralement le focus ... mais seulement si l'élément est focalisable en premier lieu. Le point de focalisation est tel que lorsque vous interagissez avec une interface utilisateur sans utiliser de dispositif de pointage (souris, pavé tactile ou écran tactile), vous pouvez passer d'une commande interactive à une autre (par exemple en appuyant sur la touche de tabulation). Vous pouvez ensuite déclencher (par exemple en appuyant sur Entrée) l'élément ciblé. Ceci n'est utile que si l'élément fait quelque chose lorsqu'il est déclenché (par exemple s'il s'agit d'un lien ou d'un bouton). Une div ne fait rien, par défaut, lorsqu'elle est déclenchée. C'est un conteneur générique.

Vous pouvez ajouter de l'interactivité à un élément avec JavaScript (addEventListener) et vous pouvez marquer l'élément comme étant interactif en utilisant l'attribut tabindex ... mais vous devez généralement choisir un élément différent (comme <button>) à la place.

Source

2017-07-17 19:17:00 Quentin

travaux actifs mais pas de mise au point ou de cible en utilisant css

Répondre

Questions connexes