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

Version imprimable

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:

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:

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:

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 ?

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

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

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

fait quasiment la même chose que

Code:

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

26/03/2016, 13h47
amdawb

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.
26/03/2016, 13h59
01001111

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.
26/03/2016, 15h22
NoSmoking

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