11548 sujets

JavaScript, DOM et API Web HTML5

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

Bonjour à tous,

J'aimerais traiter le survol de la souris sur les li (sélectionné/désélectioné) dans la div avec la classe (.articles).

1. Quand on détecte un survol sur la liste ul :
1. si l'élément survolé est le premier dans ul => il reste sélectionné
2. si c'est un autre élément à part le premier =>
1. On enlève la sélection du premier li
2. On affecte la classe sélection au nouveau élément li sélectionné
2. Quand on détecte l'absence du survol sur la liste ul :
1. On enlève la sélection de l'élément li actif
2. On affecte la sélection au premier élément li

<!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 : #ebfff3;  
  font-size : 13px;  
  background-color : #7385a3;
  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: #99a6bd;
 
}  	
.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: #bec6d5;
	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 objParentArticles = $(this).closest(".articles");
                
                objParentArticles.find("ul:first-child li").removeClass("selected");
                
                $(this).("li").mouseenter().addClass("selected");
            }).mouseleave(function(){
                var objParentArticles = $(this).closest(".articles");
            	objParentArticles.find("li").removeClass("selected");
				$(this).("ul:first-child li").addClass("selected");
			
            });
			
        });
		
		
	</script> 
 
 
</body>
</html>
Bonjour,

J'ai fait quelques essais.

Ça à marche pour une demi solution Smiley biggrin

Quand on survol la liste ul (sur le titre 2 ou 3), le premier titre perd la sélection et rien ne sa passe lorsque le survol quitte la liste ul :

$(".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 quand on ajoute le reste du code qui devrais traiter l'absence du survol sur la liste, rien me marche du tout:

$(".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");
			)};


Smiley biggol
Modifié par apt (17 May 2011 - 17:13)
J'utilise un code de ce genre (limité aux navigateurs W3C à cause addEventListener et event. Donc IE6 à IE8 non pris en charge. J'utilise également une libre perso qui permet d'ajouter les méthode insertClass et removeClass aux objets DOMElement). C'est donc à adapter à ton framework :

var SwitchParentClass=function(eventName, tagName, className){
	var root=this;
	
	var selected=null;
	
	var select=function(event){
		var target=event.target;
		
		if(target instanceof HTMLElement && target.tagName==tagName){
			var parentNode=target.parentNode;
			
			if(selected) selected.removeClass(className);
			
			if(selected==parentNode) selected=null;
			else{
				selected=parentNode;
				selected.insertClass(className);
			}
		}
	}
	
	var init=function(){
		if(eventName instanceof Array){
			var maxEventName=eventName.length;
			
			for(var i=0; i<maxEventName; i++) root.addEventListener(eventName[i], select, false);
		}else if(eventName instanceof String) root.addEventListener(eventName, select, false);
	}
	
	init()
}

var init=function(){
	var root=document.getElementsByTagName('ul');
	var maxRoot=root.length;
	
	for(var i=0; i<maxRoot; i++){
		try{ //Chrome, FF
			SwitchParentClass.prototype=root[i];
			new SwitchParentClass(new Array('hover', 'mouseout'), 'LI', 'selected');
		}catch(e){ //IE9, Safari, Opera
			root[i].SwitchParentClass=SwitchParentClass;
			root[i].SwitchParentClass(new Array('hover', 'mouseout'), 'LI', 'selected');
		}
	}
}

window.addEventListener('load', init, false);


Ce sont surtout la variable selected et la fonction select qui sont le cœur de ce que tu cherche à faire.

Mais pourquoi encadrer tes ul dans des div ?[/i][/i][/i][/i]
Modifié par MacIntoc (18 May 2011 - 16:54)
Bonjour MacIntoc,

MacIntoc a écrit :

Mais pourquoi encadrer tes ul dans des div ?


Y a pas d'encadrement :

.articles ul{ 
    width:190px; 
    height:128px; 
    padding:0; 
    list-style-type:none; 
    list-style-position:outside; 
    margin : 0 ; 
    visibility: visible; 
}
C'est justement ça que j'appelle un encadrement Smiley cligne
Pourquoi n'appliques-tu pas ta class directement sur le ul et ainsi supprimer le div dans ton code HTML ?
Sujet clos
Aller à