Discussion :

[Archimède]

Bonjour,
je m'exerce à la mise en page CSS puisque avant je faisais surtout de l'actionscript. Je commence à assez bien bricoler en javascript mais je suis plutôt mauvais en CSS par manque d'entraînement et de bonne volonté. (les soucis de portabilité d'un navigateur à l'autre me font regretter flashplayer...mais ça, c'est une autre histoire...)

Voilà, je me faisais un bouton à partir d'un div pour me faire un peu la main. Avec un dégradé sur le fond de mon div, le titre du bouton prend un fond blanc lorsqu'il réagit à un événement.
Comment éviter ce désagrément. J'avais déjà rencontré ce problème là, mais je ne sais plus comment je l'avais réglé.

Merci

https://jsfiddle.net/dy7h6vw9/1/

[ProgElecT]

Salut

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="cadrearrondi" onselectstart="return false">Button</div>

Il y a peut être moyen de le faire directement en CSS.

[Archimède]

Salut,

merci nickel

Rq: J'attends éventuellement une solution CSS pour fermer la discussion.

[Archimède]

Apparemment, une solution CSS serait :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
BODY{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

[Invité]

Bonjour,

1-

...le titre du bouton prend un fond blanc lorsqu'il réagit à un événement...

Merci de préciser sur quel navigateur.
Je n'ai rien constaté sur Firefox ou Edge.



(EDIT] Ah si ! Vu !
Mais c'est en double-cliquant : le texte se trouve sélectionné. Et donc prend un fond blanc.

Pour l'éviter :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#cadrearrondi::moz-selection {
  background:none;
}
#cadrearrondi::selection {
  background:none;
}

N.B. Il faut séparer les 2 (::moz-selection et ::selection)



2- au lieu de faire des fonctions JS (ou plutôt d'écrire le CSS dans le code JS), crée des classes CSS, que tu affiches/supprimes selon l'action.

• element.classList

• elt.classList.add()
• elt.classList.remove()

[Archimède]

Bonjour, pourtant c'était sous FF pour moi...
Merci pour le conseil n°2. Je potasse le contenu de ton lien sur les classes CSS.
A+

[Archimède]

Ok vu ton complément...

Merci

[Archimède]

Re,

j'ai un bug sur internet explorer 11. la couleur over reste figée après le click sur le bouton...J'ai adopté les méthodes classList.

https://jsfiddle.net/7gjeav86/

[Archimède]

En fait, il n'y a pas besoin d'ajouter et de retirer des classes...
Le fait de redéfinir className annule la précédente...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
        function onmousedown(e){
          e.target.className="down";
        }
 
        function onmouseup(e){
            e.target.className="up";
        }
 
        function onmouseover(e){
             e.target.className="over";
        }
 
        function onmouseout(e){
             e.target.className="out";
        }

Et là, ça marche !

[Archimède]

Remarque: pour annuler la sélection du texte en javascript :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

  BTdiv.addEventListener('selectstart',function(e){e.preventDefault();});

[Invité]

Oui, c'est exact.

• classList.add(), classList.remove() ajoute/supprime une classe à la liste des classes existantes.
• .className = ... (re)définit la classe à appliquer (de façon exclusive, en supprimant toute autre).

Par contre, si l'élément DOIT avoir une classe "par défaut" en particulier, il faut utiliser .add() / .remove().
ex. :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="mon_bouton">... </button>

[Archimède]

Merci à vous deux pour ces éclaircissements. Je me réveille un peu moins bête ce matin.. La discussion a été très constructive.