Bonjour à tous,

Je sais qu'utiliser Elementor n'est pas optimal mais cela me permet d'aller assez vite sur certains projets tout en touchant un peu au code... Mais j'ai un problème où justement je pense qu'Elementor prend le dessus sur ce que je veux faire 

Je cherche à rendre un élément au passage de la souris scalable et avec un changement de couleur du heading du gris au noir.

selector:hover{
    scale:1.2;
    transition:0.5s;
    color:black !important; 
}

La problématique c'est que mon scale fonctionne mais pas le color. Sachant que ma couleur de base (grise) est mise depuis l'interface Elementor.
Pour information, ce texte fonctionne lorsqu'il est mis un élément "éditeur de texte" donc je pense un <p>. Cela doit donc venir des headings, mais je ne trouve pas l'endroit du css d'Elementor qui prend le dessus et me bloque quand j'inspecte la page...

Voici le lien du site, il faut descendre un peu : http://adriencommunication.fr

Et je vous joins l'image pour vous montrer sur quelle partie j'ai mis ce code (div qui contient le h3 logo et le lottie)

Merci d'avance.

Bonjour,

Domi65, apparemment c'est .com et pas .fr.

AdrienCrucet, il faut que tu cibles le header à l'intérieur de l'élément qui est survolé, parce qu'il a une couleur spécifique. Ça ressemble à

.elementor-293 .elementor-element.elementor-element-e4f36c3:hover .elementor-heading-title {}

quand je teste via l'inspecteur de mon navigateur, à toi de corriger dans ton éditeur.

(et pas besoin de !important )

-
Edité par Lamecarlate 30 janvier 2023 à 19:05:58

Bonjour,

En effet je confirme que c'est : www.adriencommunication.com

Merci pour ta solution ça marche !

Afin de bien comprendre.

Si j'ai ce fonctionnement :

<div class="example">
<h3>MON TITRE
</h3>
</div>

Ce code là ne fonctionne pas :

h3 {
color: grey;
}

.example:hover {
color : black;
scale :1.2;
transition : 0,5s;
}

Mais celui-ci (en gros pointer le titre quand son container est hover) :

h3 {
color: grey;
}

.example:hover {
scale :1.2;
transition : 0,5s;
}

.example:hover h3 {
color : black;
transition : 0,5s;
}

Encore merci pour la résolution et les indications sur ce complément d'informations 

Voilà, c'est tout à fait ça

Si c'est résolu, pense à marquer ton sujet comme tel, tu as un bouton en haut à droite pour ça.

Je vais m'en occuper de ce pas.

Pour simplifier la correction et éviter de le faire à chaque élément, j'ai créer une class 'balck" aux div qui sont les élements .elementor-element.elementor-element-??????

afin de tous les modifier en un seul coup et leur rajouter simplement la classe black.

Mais bizarrement cela ne fonctionne pas :

.black:hover .elementor-heading-title {
color:black;
transition:0.5s;
}

Est-ce autre chose que je n'ai pas compris ?

Alors ça peut être une question de spécificité CSS, là.

Ce que tu dois surcharger c'est la couleur dans .elementor-293 .elementor-element.elementor-element-e801b6d .elementor-heading-title : le poids est de 40 (4 classes, une classe vaut 10, arbitrairement). C'est pour ça que tu as dû écrire .elementor-293 .elementor-element.elementor-element-e4f36c3:hover .elementor-heading-title pour mettre ta couleur (50, 4 classes et une pseudo-classe). Or .black:hover .elementor-heading-title a un poids de 30 (2 classes et une pseudo-classe), donc ça ne peut pas surcharger le premier sélecteur… Tu peux peut-être essayer .elementor-element.black:hover .elementor-heading-title (40 : 3 classes et une pseudo-classe), si c'est bien déclaré après le premier sélecteur, ça le surchargera.

Ouaw je connaissais pas du tout ces notions en CSS.

Je vais aller en apprendre plus de ce pas.

Encore merci pour tout !