28172 sujets

CSS et mise en forme, CSS3

Survol sur une liste

Bonjour à tous,

J'ai une liste de titres sous forme de li, et je dois traiter le survole la souris sur les traiter pour afficher l'image correspondante en face de la div conteneur (classe:articles).

Mais voila , l'image ne reste pas fixé dans le conteneur et se deplace selon le item li survolé.

Comment faire pour afficher n'importe quelle image dans le même endroit ?

Merci.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
	font-family : Verdana, Arial;
}
#titre {
	width : 400px;
	margin : auto;
}

.articles {
	font-size : 13px;
	position : relative;
	border : 1px solid #e0e0e0;
	width : 352px;
	height : 128px;
	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 {
	position : relative;
	margin: 0;
	cursor : pointer;
}
.articles li a {
  text-decoration : none;
  color : #ebfff3;  
  font-size : 13px;  
  background-color : #7385a3;
  border : 1px solid #7385a3;
  border-right: #fff 1px solid;
  border-bottom: #fff 1px solid; 	
  display : block;
  padding : 2px;
  height : 37px;
  line-height : 10px;
}
.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: 128px;
    width: 162px;
	position:absolute;
	left:192px;
	top:0; right:0;
	background-color : #fff;
	padding : 0px;
}
.articles li img {
  display : none;
  
}
.articles li:hover img {
    display: block;
    z-index: 100;
	left: 190px;
    position: absolute;
    top:0; right:0;
}
.articles li:hover div {
  position : absolute;
  display : block;
}
.articles li a.selected {
	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><img class="imag" src="facebook.jpeg"><a class="selected" 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 />
 
</body>
</html>

Modifié par apt (16 May 2011 - 10:15)
Bonjour,

Tiens-tu absolument à faire ça en pur CSS ou bien la solution du javascript (éventuellement avec jquery pour les effets) te conviendrait-elle aussi ?

Entre nous, pourquoi n'as-tu pas attribué un ID au lieu d'un CLASS au div ?

Pour t'inspirer un peu :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Image en position absolute au survol de la souris</title>
<style type="text/css">
body {position: relative; background: black; margin: 0; padding: 0;}
div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 680px; font: 13px arial,verdana,helvetica, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 13px sans-serif; padding: 5px 10px; margin: 0 0 1px; border-width: 0; text-decoration: none; color: #FFC; background: #444;border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA; border-right: 5px double white;}
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 0; left: 180px; height: 128px; width: 162px; border: 2px solid white}
</style>
</head>
<body>
<div id="links">
	<a href="#">texte1<img src="google.jpeg"></a>
	<a href="#">texte2<img src="numericable.jpeg"></a>
	<a href="#">texte3<img src="facebook.jpeg"></a>
	<a href="#">texte4<img src="image4.gif"></a>
	<a href="#">texte5<img src="image5.gif"></a>
</div>
</body>
</html>


Cordialement
Modifié par lddsoft (15 May 2011 - 17:34)
lddsoft a écrit :
Bonjour,

Tiens-tu absolument à faire ça en pur CSS ou bien la solution du javascript (éventuellement avec jquery pour les effets) te conviendrait-elle aussi ?


Il faut absolument ajouter du jquery.

a écrit :
Entre nous, pourquoi n'as-tu pas attribué un ID au lieu d'un CLASS au div ?


Parce que j'aurais besoin d'avoir au minimum deux de cet effet sur une même page.

Ton exemple marche bien, mais reste d'autres points à réaliser :

1 - Le premier titre de chaque div conteneur, doit toujours être sélectionné au chargement de la page, qui veut dire que son image correspondante s'affichera devant.

2 - lorsque la souris survol un autre titre de la même div conteneur, le premier titre perd la sélection.

3 - lorsque la souris quitte totalement la div conteneur, le premier titre revient à son état initial à savoir sélectionné.

4 - la hauteur des titres doit être uniformiser.

Merci. Smiley smile
Je voulais simplement te mettre sur une piste, pas écrire le code à ta place Smiley rolleyes !

N.B.: je te signale que ton site (bouton www) a fait surchauffer mon anti-virus McAfee par ses attaques de chevaux de Troie (JS/Redirector.u)!
Modifié par lddsoft (16 May 2011 - 05:54)
N'as-tu pas des idées en ce qui concerne les points cités ?

Pour le code, jee vais essayé de développer le code.

A propos de mon site, ça fait longtemps que je ne le fait pas à jour.
apt a écrit :
Il faut absolument ajouter du jquery.

Pourquoi absolument ?

Pour les points cités, inspire-toi de ce que tu as fait pour ton script de départ.

A+
lddsoft a écrit :

Pourquoi absolument ?

A+


Parce qu'on ne peut réaliser les effets de la sélection/déselection ainsi que traiter le survol de la souris par pur CSS.

il faut une magie de jQuery Smiley eek
bonsoir,

une base css peut le faire :

1) une erreur :
.articles li { 
    position : relative; 
    margin: 0; 
    cursor : pointer; 
}

c'est ul qu'il fallait désigné en position:relative;

pour affiché l'image du premier item de liste , le pseudo :first-child est utile.
.articles li:hover img ,
.articles li:first-child img { 
{/* ... */}

Cordialement
Bonjour apt,
lddsoft a écrit :
N.B.: je te signale que ton site (bouton www) a fait surchauffer mon anti-virus McAfee par ses attaques de chevaux de Troie (JS/Redirector.u)!
Comptes-tu faire quelquechose pour ce "petit" problème ?
Bonjour gc-nomade,

gc-nomade a écrit :

c'est ul qu'il fallait désigné en position:relative;


Pour :

position : relative;


Je l'ai attribué au div englobante (.articles) au lieu de UL.

est-ce dans les normes ou peut il poser problème ?

a écrit :
pour affiché l'image du premier item de liste , le pseudo :first-child est utile.
.articles li:hover img ,
.articles li:first-child img { 
{/* ... */}

Cordialement


Merci.
Modifié par apt (16 May 2011 - 10:09)
Laurie-Anne a écrit :
Bonjour apt,
Comptes-tu faire quelquechose pour ce &quot;petit&quot; problème ?


Bonjour Laurie-Anne,

Non pas à ce que je sache, parce que j'ai abandonné le site...
Sujet clos
Aller à