28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de ciblage

Bonjour à tous,

En partant du code html suivant, est-il possible en CSS de cibler ul.dropdown pour modifier a.menu-item-container ? Concrètement, je voudrais changer le background de a lorsqu'on survole ul.

J'avoue que je sèche complètement…

Merci pour votre aide !



<li class="menu02">

<a class="menu-item-container" href="www.test.html"></a>

<ul class="dropdown"></ul>

</li>
Merci beaucoup pour ton exemple concret et fonctionnel ! Rarement eu de réponse aussi précise sur un forum Smiley smile

Malheureusement, je ne parviens pas à intégrer ce script car je travaille sur un template Joomla, et je ne sais pas encore très bien comment m'y prendre.

Pour commencer, peux-tu me confirmer que le script suivant est "juste" ?
En effet, pour ma question, j'avais simplifié mon code.
Mais en version étendue (adaptée à mon vrai code HTML) ça donne ça :


$( "#g-navigation .g-main-nav ul.g-toplevel li.menu02 .g-dropdown.g-active" ).hover(function() {
  $("#g-navigation .g-main-nav ul.g-toplevel li.menu02 a.g-menu-item-container").css("background-color", "red !important");
}, function() {
    $("#g-navigation .g-main-nav ul.g-toplevel li.menu02 a.g-menu-item-container").css("background-color", "white !important");
  });


En l'occurrence :

-Puis-je utiliser des ciblages aussi longs ? (ie. qui fonctionnent aussi dans mon fichier CSS).

- Puis-je utiliser "!important" de cette manière ?

Merci !
Halfmoon a écrit :

En l'occurrence :

-Puis-je utiliser des ciblages aussi longs ? (ie. qui fonctionnent aussi dans mon fichier CSS).

Oui c'est tout à fait possible par contre ça sera sous cette forme pour le multi ciblage
$("h2, div, span")

Halfmoon a écrit :

- Puis-je utiliser "!important" de cette manière ?

Non pas de cette manière. y'a deux autres solutions pour ça :
Utilisé une classe prédéfinis 
.importantRule { width: 100px !important; }
$('#elem').addClass('importantRule');

Ou utilisé .attr()
$('#elem').attr('style', 'width: 100px !important');


j'ai modifié http://codepen.io/anon/pen/OMjova
Modifié par JENCAL (14 Jan 2016 - 13:15)
En fait, je ne pensais pas à du multi ciblage, mais bien à un seul ciblage (assez long car spécifique pour pouvoir overrider d'autres CSS).

Ce n'est pas possible ? Ou alors je dois le rédiger autrement ?

Ton nouvel exemple se comporte de façon assez instable pour moi sur Safari Smiley decu
Modérateur
Halfmoon a écrit :
En fait, je ne pensais pas à du multi ciblage, mais bien à un seul ciblage (assez long car spécifique pour pouvoir overrider d'autres CSS).


En fait, en faisant ".css()" en jQuery, il va généré un style inline (<div style="...">) et donc avoir plus de poids que ton sélecteur CSS, et ça que tu ai fait ça ou ça :

$('div').css();
$('html body section article #monSuperContenurQuiPeseLourd .maClass div').css();


Le poids ne sera important que si tu fais un addClass().
Tu auras alors :

html body section article #monSuperContenurQuiPeseLourd .maClass div{...}
html body section article #monSuperContenurQuiPeseLourd .maClass div.active{...}
Administrateur
Bonjour,

Note dont j'ignore si elle te concerne : si tu essaies d'écraser une déclaration CSS qui a le modifieur !important, c'est faisable avec un style en ligne ayant lui aussi ce !important MAIS .css() de jQuery ne sait pas faire ça ! Remplace ton background-color par un border ou outline, il ne sera pas ajouté à ton élément s'il y a un !important (aïe).
D'où le conseil de Yordi d'ajouter une classe qui elle a aussi ce !important et qui va écraser ta 1ère déclaration CSS si elle a la même spécificité et est écrite après dans les CSS ou bien a plus de spécificité. Ou bien tu appliques la solution JS/jQuery http://stackoverflow.com/a/18792741/137626 (ou celle de Nate)
Merci à vous deux pour vos conseils et votre aide.

À vrai dire, à force de tâtonner, j'ai fini par trouver la solution, qui était pour le moins minimaliste en l'occurrence ! Heureusement que cette petite lumière a fini par s'allumer, car plus le temps passait et plus je m'embourbais ! J'étais à deux doigts de laisser tomber.

Donc pour résumer les choses (j'aurais peut-être dû exposer mon problème de façon plus concrète), mon souci était au niveau de mon menu principal. Soit 3 liens A, B et C.

Le menu B fait apparaître au survol une sorte de mega menu juste en dessous. Le mega menu devant avoir la même couleur de fond que celle de mon lien de menu (lorsqu'il est actif OU survolé).
Lorsque je suis déjà dans la bonne rubrique (= menu B) alors tout allait bien. Mais imaginons que je sois sur la rubrique A, je survole le lien B, il prend la couleur active, le mega menu apparait, également de la même couleur. Et là je décide de survoler le mega menu : le menu B reprend donc sa couleur inactive, ce que je voulais éviter.

Je voulais donc provoquer le changement de couleur du lien lorsque je survolais le mega menu.

Ensuite, j'ai fini par me dire qu'il vaudrait mieux que je cible un changement de couleur de l'élément "li" qui contient mon "a" (quand mon "a" est inactif, le fond est transparent donc la couleur du bloc qui le contient est visible). Ce qui me permet de contourner le problème "!important" vu plus haut.

Et au final, tout a été résolu par un simple :

li.menu02:hover {
background:#ff5650 !important;
}


dans la mesure où, je le comprends un peu tard, le mega menu FAIT PARTIE de mon élément "li". Il est juste visible ou non, mais du point de vue syntaxique il est pris en compte pour le :hover.

Je me permets de vous expliquer tout ça dans la mesure où vous avez passé du temps à m'aider, cela vous intéressera peut-être sur le principe ?

En espérant avoir été un minimum clair, je sens que ce n'est pas gagné Smiley biggrin
Sujet clos
Aller à