Modifier le CSS de tout texte sans toucher à sa balise HTML

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

J'ai assigné (via CSS) un curseur personnalisé au body d'une page1. Ce qui fait que le pointeur apparaît partout, même au survol du texte. Ceci m'embête un peu, d'autant que sur les liens, le curseur change tout à fait normalement. Je me suis dis : "Comment faire la même chose pour le survol du texte ?" J'ai donc tenté via CSS, d'assigner le curseur "text" à tous les p,ul,ol,dl,table,blockquote,pre,h1,h2… Mais dans ce cas, le curseur texte apparaît même lors du survol d'un espace vide au sein des balises de type texte. Je me demande s'il y a un moyen de retrouver un comportement normal du curseur…

Je pensais au JavaScript, qui identifie tout texte, en soi, comme un nœud du DOM. Mais je ne m'y connais pas assez en JS pour sélectionner tous les nœuds texte du DOM. Peut-être qu'il n'y a pas de formule pour ça et qu'il faut faire une boucle, mais là je sèche aussi.

Merci d'avance pour vos avis. :)


  1. Non, ça n'est pas du tout kikoolol passkeuh je l'ai fait ironiquement :p 

Bien le bonjour tous ! :)

+0 -0

Une petite piste avec du Javascript :

Tout le body :

1
document.body.style.cursor = 'help';

Par ID (id="foo") :

1
document.getElementById('foo').style.cursor = 'help';

Par class (class="toto") :

1
document.getElementsByClassName('toto')['0'].style.cursor = 'help';

Par balise (<p>) :

1
document.getElementsByTagName('p')['0'].style.cursor = "help"

Pour ces 2 dernières, il faut mettre obligatoirement un indice (['0'] dans les exemples ci-dessus). Lorsque que l'on veut récupérer toutes les balises concernées, il faut faire une boucle :

1
2
3
4
5
6
// Récupération des éléments concernés
var elems = document.getElementsByTagName('p');
// Boucle à partir du nombre d'éléments récupérés
for (var i=0; i<elems.length; i++) {
 elems[i].style.cursor = 'help';
}

HTTP/1.1 418 I'm a teapot

+0 -0
Auteur du sujet

Merci pour ces pistes, j'ai bien compris l'idée.

Mais le nœud #text (cf. l'arbre du DOM) ne semble pas pouvoir être concerné par des règles CSS. J'ai bien essayé d'appliquer du style via JS de cette manière :

1
2
3
4
5
// Récupération des éléments concernés
var ptxt = document.getElementsByTagName('p');
// Boucle à partir du nombre d'éléments récupérés
for (var i=0; i<ptxt.length; i++) {
ptxt[i].firstChild.style.cursor = 'text';

Sans résultat.

Il doit pourtant y avoir un moyen : le navigateur affiche par défaut le curseur "text" au survol du texte uniquement !

Édité par Buddy

Bien le bonjour tous ! :)

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Il doit pourtant y avoir un moyen : le navigateur affiche par défaut le curseur "text" au survol du texte uniquement !

Pas sûr qu'il y ait moyen, non. Ce comportement est géré par la règle CSS cursor: auto appliquée à <body> par défaut, puis par l'User Agent Stylesheet de ton navigateur, puis par les feuilles CSS de la page que tu visites.

cursor: auto n'est généralement pas appliqué à tous les éléments, cf. https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

CSS ne permet pas de modifier ou d'intervenir sur quel curseur correspond à quel type de contenu. (Et plus généralement, CSS ne permet pas de sélectionner un type de contenu.)

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

En effet, pas possible, dommage. [Edit: Ou alors peut-être qu'en ajoutant des <span> avec une classe spéciale pour tout nœud texte à l'aide de JS, on obtiendrait quelque-chose… Mais ça produirait un code moche. J'y renonce. ]

Merci beaucoup pour ces explications précises en tout cas, j'ai tout compris. Et encore merci à EtienneR pour son aide.

Édité par Buddy

Bien le bonjour tous ! :)

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte