[JQuery]style css :hover

Version imprimable

09/04/2008, 18h21
Ashgenesis

[JQuery]style css :hover
Bonjour,

J'ai 2 liens dans ma page
Code:

1 2 <a href="#" id="menu">plop</a> <a href="#" id="sous-menu">sous-plop</a>
et une feuille de style qui ressemble à ça
Code:

1 2 3 4 5 6 7 a#menu{ background-color: red; } a#menu:hover{ bacground-color: green; }
Le sous-menu n'est pas stylé mais on ne s'en préoccupe pas.

Donc la problématique maintenant, je souhaiterais, lorsque je survole le sous-menu, changer la classe du menu et la passer en :hover.

C'est à dire que lorsque je fait un onmouseover sur le a#sous-menu il le fasse aussi sur le a#menu. Auriez-vous quelques pistes merci.
Avec JQuery si possible ;)
11/04/2008, 09h36
E.Bzz

Bonjour,

Code:

<a href="#" id="sous-menu" onmouseover="this.parentNode.className = 'class_hover';">sous-plop</a>

A+
11/04/2008, 11h40
Ashgenesis
Merci de ta réponse mais ça c'est simple et ce n'est pas ce que je cherche à faire, j'ai du mal m'expliquer.

J'ai stylé ma balise "a" de 2 manières différentes une basique et une lorsque l'on passe la souris par dessus (:hover)
Code:

1 2 3 4 5 6 7 a { background-color: red; } a:hover { bacground-color: green; }
Et je souhaite donc utiliser la class a:hover que j'ai déjà crée mais au survol d'une autre balise a je ne souhaite pas créer une seconde classe qui effectuera le même comportement.
11/04/2008, 11h53
E.Bzz

Citation:

Envoyé par Ashgenesis

Et je souhaite donc utiliser la class a:hover que j'ai déjà crée mais au survol d'une autre balise a je ne souhaite pas créer une seconde classe qui effectuera le même comportement.

Sauf que a:hover n'est pas une class.
C'est un style CSS.
Et un style CSS dynamique ne peut s'appliquer (en CSS) qu'à l'élément auquel il est attaché ...

Es-tu sûr d'avoir posté dans le bon forum (si tu ne souhaites pas de solution JS) ?

A+

Oui je suis sûr d'avoir posté dans la bonne section, je ne réfute pas la solution par Javascript proposée. Celle ci je la connais déjà et je cherchais en fait un autre moyen afin d'éviter de répéter mon CSS une seconde fois pour faire la même chose.

Je ne cherche pas non plus à appliquer un style css dynamique à un autre élément mais juste de le déclencher au survol d'un autre élément.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <style type="text/css">
        a {
            background-color: red;
        }
 
        a:hover {
            background-color: green;
        }
 
        .class_hover {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#" id="menu">MENU</a>
    <a href="#" id="sous-menu">sous-menu</a>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#sous-menu").hover(
                function () {
                    $("a#menu").addClass('class_hover');
                },
                function () {
                    $("a#menu").removeClass('class_hover');
                }
            );
        });
    </script>
</body>
</html>

Voilà un exemple concret de ce que je cherche à faire mais ceci sans utiliser la classe "class_hover" car elle est redondante par rapport au a:hover