Sélectionner/Désélectionner un élément li

Marsh Posté le 18-05-2011 à 09:48:57

Bonjour à tous,

Avec ce code, j'aimerais avoir un effet de survol sur les li.

Au chargement de la page, le premier li de chaque liste est sélectionné automatiquement.

Quand il y a survol sur le premier li d'une liste ul, il y aura désélection du premier élément.

Quand la souris quitte la liste ul, le premier li reprend son état initial à savoir avoir la sélection.

J'ai pu réaliser une demi solution (désélection du premier li lors de la détection d'un survol de la souris), lorsque j'écris ce code :

Code :

$(".articles" ).children("ul" ).mouseenter(function(){
var articleParent = $(this).parents(".articles" );
articleParent.find("ul li:first-child" ).removeClass("selected" );
articleParent.next().children("li" ).addclass("selected" );
});

Mais rien ne sa passe si j'ecris le reste du code :

Code :

$(".articles" ).children("ul" ).mouseenter(function(){
var articleParent = $(this).parents(".articles" );
articleParent.find("ul li:first-child" ).removeClass("selected" );
articleParent.next().children("li" ).addclass("selected" );
}).mouseleave(function(){
articleParent.find("ul li" ).removeClass("selected" );
articleParent.find("ul li:first-child" ).addClass("selected" );
alert("ok" );
)};

Et voila le code complet :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>CSS Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" lang="fr" content="CSS-jQuery Hover" />
<style type="text/css" media="screen">
* {
font-family : Verdana, Arial;
}
.articles {
font-size : 13px;
position : relative;
border : 1px solid #e0e0e0;
width : 352px;
height : 126px;
margin : auto;
padding : 1px;
}
.articles ul{
width:190px;
height:128px;
padding:0;
list-style-type:none;
list-style-position:outside;
margin : 0 ;
visibility: visible;
}
.articles li {
margin: 0;
cursor : pointer;
}
.articles li a {
text-decoration : none;
color : #1d5b9c;
font-size : 13px;
background-color : #b2c9de;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
display : block;
padding : 2px;
height : 37px;
line-height : 12px;
}
.articles li a:hover{
background-color: #6691bd;
color:#fff;
}
.articles .nimg {
position:absolute;
left:190px;
top:0; right:0;
background-color : #fff;
padding : 1px;
}
.articles .imag {
height: 126px;
width: 162px;
position:absolute;
left:192px;
top:0; right:0;
background-color : #fff;
padding : 1px;
}
.articles li img {
display : none;
}
.articles li:hover img ,
.articles li:first-child img {
display: block;
left: 190px;
position: absolute;
top:0; right:0;
}
.articles li.selected a{
background-color: #6691bd;
color : #fff;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
}
.articles li.selected2 a{
background-color: #6691bd;
color : #000;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div class="articles">
<ul>
<li class="selected"><img class="imag" src="facebook.jpeg"><a href="#">Facebook déclare ouvertement la guerre à Google</a></li>
<li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
<li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
</ul>
</div>
<br /><br />
<div class="articles">
<ul>
<li class="selected"><img class="imag" src="facebook.jpeg"><a href="#">Facebook déclare ouvertement la guerre à Google</a></li>
<li><img class="imag" src="numericable.jpeg"><a href="#">Numericable lance une offre mobile illimitée à 24,90 euros</a></li>
<li><img class="imag" src="google.jpeg"><a href="#">Les ordinateurs portables Chromebooks de Google arriveront le 15 juin</a></li>
</ul>
</div>
<script charset="utf-8" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
$(function(){
$(".articles" ).children("ul" ).mouseenter(function(){
var articleParent = $(this).parents(".articles" );
articleParent.find("ul li:first-child" ).removeClass("selected" );
articleParent.next().children("li" ).addclass("selected" );
}).mouseleave(function(){
articleParent.next(".selected" ).removeClass("selected" );
articleParent.("ul li:first-child" ).addClass("selected" );
)};
});
</script>
</body>
</html>

Message édité par apz le 18-05-2011 à 10:07:47

---------------
Cordialement.

Marsh Posté le 18-05-2011 à 09:48:57

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *