hover effect à partie de 2 div de même niveau

**amdawb** · 26/03/2016, 11h21

Bonjour,
Dans ma newslist, je voudrai appliquer un effet de survol sur le titre de la news aussi bien en survolant directement ledit titre (h1 a) mais aussi en survolant l'image adjacente.

Mes connaissances en Js étant limitées ,j'ai mis ce code:

Code html :

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

1
2
3
4
5
6
7
8
9
	<article class="art">
		<figure>
			<a href="article.html"><img src="01.png"></a>
		</figure>
		<div class="txt">
			<h1><a href="article.html">Title one</a></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</article>

Code css :

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

1
2
3
4
5
6
7
8
article {width:400px;height: 200px;margin:0;padding:0;background:azure;}
figure, .txt {	float:left;}
figure {width:150px;height:150px;margin:0;}
figure a{display:block;	width:150px;height:150px;text-decoration:none;}
figure img {width:150px;height:150px;border:none;}
.txt {width: 200px;	height:150px;margin-left: 40px;	background:blanchedalmond;}
.txt h1 a{color:red;text-decoration:none;font-size:16px;}
.txt h1 a:hover{color:green;}

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
	<script type="text/javascript">
	$(document).ready(function(){
		$('figure').mouseover(function () {
			$(this).parent('article.art').find('.txt h1 a').css("color", "green");
		})
		.mouseout(function () {
			$(this).parent('article.art').find('.txt h1 a').css("color", "red");
		});
		$('.txt h1').mouseover(function () {
			$(this).find('a').css("color", "green");
		})
		.mouseout(function () {
			$(this).find('a').css("color", "red");
		});
 
	});
	</script>

Pourriez-vous me corriger mon code svp ?

**01001111** · 26/03/2016, 12h42

Je ne vois pas d'erreur dans ton code, as-tu bien pensé à inclure une source de jquery?
ceci fonctionne parfaitement:

Code html :

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
36
37
38
39
40
41
42
43
44
45
 
<!Doctype HTML>
<html>
<head>
        <style type="text/css">
                article {width:400px;height: 200px;margin:0;padding:0;background:azure;}
                figure, .txt {  float:left;}
                figure {width:150px;height:150px;margin:0;}
                figure a{display:block; width:150px;height:150px;text-decoration:none;}
                figure img {width:150px;height:150px;border:none;}
                .txt {width: 200px;     height:150px;margin-left: 40px; background:blanchedalmond;}
                .txt h1 a{color:red;text-decoration:none;font-size:16px;}
                .txt h1 a:hover{color:green;}
        </style>
</head>
<body>
        <article class="art">
		<figure class="figure">
			<a href="article.html"><img src="01.png"></a>
		</figure>
		<div class="txt">
			<h1><a href="article.html">Title one</a></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
	</article>
	<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
                $('figure').mouseover(function () {
                        $(this).parent('article.art').find('.txt h1 a').css("color", "green");
                })
                .mouseout(function () {
                        $(this).parent('article.art').find('.txt h1 a').css("color", "red");
                });
                $('.txt h1').mouseover(function () {
                        $(this).find('a').css("color", "green");
                })
                .mouseout(function () {
                        $(this).find('a').css("color", "red");
                });
 
        });
        </script>
</body>
</html>

à noter qu'il faut pour que l'exemple ici fonctionne avoir jquery-2.2.2.min.js dans le dossier racine, le même que celui de la page html.
d'autre part tu as un doublon dans ton code:

Code css :

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

1
2
3
 
    .txt h1 a{color:red; }
    .txt h1 a:hover{color:green;}

fait quasiment la même chose que

Code javascript :

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

1
2
3
4
5
6
7
 
                $('.txt h1').mouseover(function () {
			$(this).find('a').css("color", "green");
		})
		.mouseout(function () {
			$(this).find('a').css("color", "red");
		});

hormis le fait que dans le second cas, c'est le hover sur le h1 qui déclenche l'évènement

**amdawb** · 26/03/2016, 13h47

Salut ' 01001111',

Oui ,j'ai inclue jQuery, et pour le doublon c'est noté.
Je voulais simplement savoir si mon code Js est correct de point de vue syntaxique et voir s'il y a autre manière de faire.

Merci.

**01001111** · 26/03/2016, 13h59

oui c'est correct ! Après tu peux faire une animation sur la couleur de la police par exemple, plutôt qu'un changement net.
je fais en ce moment une librairie qui le permet en traitant les couleurs en rgba et acceptant tout type de représentation standard pour les couleurs, mais je ne pense pas que ce soit d'une utilité énorme.

**NoSmoking** · 26/03/2016, 15h22

Bonjour,
pourquoi ne pas simplement utiliser le CSS :hover ?

hover effect à partie de 2 div de même niveau

jQuery

Discussions similaires

Partager

Partager