[JQuery]style css :hover

**Ashgenesis** · 09/04/2008, 18h21

Bonjour,

J'ai 2 liens dans ma page

Code :

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

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 :

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

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

**E.Bzz** · 11/04/2008, 09h36

Bonjour,

Code :

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

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

A+

**Ashgenesis** · 11/04/2008, 11h40

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 :

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

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.

**E.Bzz** · 11/04/2008, 11h53

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+

**Ashgenesis** · 11/04/2008, 15h42

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 :

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
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

[JQuery]style css :hover

jQuery

Discussions similaires

Partager

Partager