Discussion :

[amdawb]

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 ?