[Résolu] Css et propriété hover qui ne marche pas

Bonjour,

Depuis quelques temps lorsque l'on survole les "logos" (Images à droite, pour chaque évènement) de la page http://messinou.fr/sortir.htm la propriété hover ne marche pas correctement.

En claire le site propose un agenda. Pour chaque événement il y a des images avec une fonction hover pour agrandir l'image. Cela fonctionne bien. Mais j'utilise également une image (un logo) qui doit s"afficher en haut à droite du cadre (en dépassant un peut).

Le problème est que mes "logos" ne restent pas à droite lors du survole. J'utilise pourtant une classe spécifique pour les "logos" avec un attribut hover aux caractéristiques identique à la classe. Pourtant seul le survol ne marche pas et déplace l'image.

Qui arriverait à résoudre le problème (qui n’était pas là au début de ma programmation) .

Bonsoir Cascaret,

Je vous prie de bien vouloir m'excuser de la critique que je vais vous faire : votre explication est particulièrement confuse et disparate .
Pour vous aider au mieux, il va falloir fournir des informations plus précises :

Cascaret a écrit :
... Pour chaque événement il y a des images avec une fonction hover pour agrandir l'image...

Pouvez-vous présenter le code HTML d'un des blocs concerné par ce problème ?

Cascaret a écrit :
...J'utilise pourtant une classe spécifique pour les "logos" avec un attribut hover aux caractéristiques identique à la classe...

De quelle classe parlez-vous ?

Cascaret a écrit :
...il y a des images avec une fonction hover pour agrandir l'image...

Quelle est le nom de la fonction ?

Sinon pour faire un premier état des lieux, votre page ne retourne pas d'erreur JS, mais 2 images sont manquantes :
- http://messinou.fr/sortir_files/images/templatemo_menu_divider.png
- http://messinou.fr/sortir_files/images/templatemo_menu.jpg

En l'attende de vos compléments d'informations.
Bonne soirée et bon code...

Voici un exemple d'événement (idée de sortie) :

<div class="post_box">
<img src="logo/expos.gif" alt="logo exposition" title="&Eacute;v&eacute;nement exposition" class="logo"/>
<img src="http://metz.fr/agenda/images/9474_AFFICHE_MP_13_N1.200.jpg" alt=" Photo : metz.fr " title=" Photo : metz.fr ">
<p class="post_meta"><span class="cat">&Eacute;vènement <a href="">Exposition</a></span> | Date : Du 21 Mars 2013 au 20 Mars 2014</p>
<h2> ... <tt>...</tt></h2>
<p> [...]</p>
<a class="more" href="http://metz.fr/agenda/fiche-9474.php" onclick="window.open(this.href, 'exemple', 'height=900, width=1200, top=50, left=50, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;">Plus ...</a>
<div class="cleaner"></div>
</div>

Dans la ligne

<img src="logo/expos.gif" alt="logo exposition" title="&Eacute;v&eacute;nement exposition" class="logo"/>

on y trouve une class logo.

Voici la partie CSS de cette class :

.post_box .logo {float:right; padding:4px; margin:-15px -15px 0px 0px; max-width:55px; max-height:55px; background:#F5F5F5;
	/*css3*/
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	-moz-box-shadow:2px 2px 5px 0 #A9A9A9;
	-webkit-box-shadow:2px 2px 5px #A9A9A9;
	box-shadow:2px 2px 5px 0 #A9A9A9;
}
.post_box .logo img:hover {float:right; padding:4px; margin:-15px -15px 0px 0px; max-width:55px; max-height:55px; background:#F5F5F5;
	/*css3*/
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;
	-moz-box-shadow:2px 2px 5px 0 #A9A9A9;
	-webkit-box-shadow:2px 2px 5px #A9A9A9;
	box-shadow:2px 2px 5px 0 #A9A9A9;
}

Le résultat attendu : une image en haut à droite d'un cadre créé sous forme de div

<div class="post_box">

.

En réalité : l'image de la ligne de code

<img src="logo/expos.gif" alt="logo exposition" title="&Eacute;v&eacute;nement exposition" class="logo"/>

se déplace au passage de la sourie.

Jutiliser la propriété HOVER un peut plus loin. L'image de la ligne de code

<img src="http://metz.fr/agenda/images/9474_AFFICHE_MP_13_N1.200.jpg" alt=" Photo : metz.fr " title=" Photo : metz.fr ">

prend bien la propriété "Hover" que je demande aux images de la div (class="post_box").

.post_box img { float: left; max-width: 125px; max-height: 100x; padding: 2px; border: 1px solid #ccc; margin: 4px 25px 4px 4px ; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow:1px 1px 10px #000 , 0 1px 0 rgba(255,255,255,0.4)}
.post_box img:hover { float: left; max-height: 220x; max-width: 220px; padding: -24px 2px 2px -12px ; margin: -24px 5px 5px -12px ; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

.

Voici un exemple en image



Seul l'image de gauche doit s’agrandir au passage de la souri.
Modifié par Cascaret (15 Mar 2014 - 07:30)

Bonsoir Cascaret,

Merci pour vos compléments d'informations. Votre problème a été plus facile à cerner.

Nous avons la structuration HTML récurrente suivante :

<div class="post_box">
    <!-- (1) Logo -->
    <img src="..." alt="logo jeux_video" title="Événement Jeux Vidéo" class="logo">
    <!-- (2) Vignette -->
    <img src="..." alt=" Photo : Facebook " title=" Photo : Facebook ">
    ...
    <div class="cleaner"></div>
</div>

Les images Logo (1) et Vignette (2) ont les styles suivants :

...
/*(A)*/ .post_box img {
    float: left;
    max-width: 125px;
    ...
    box-shadow: 1px 1px 10px #000, 0 1px 0 rgba(255,255,255,0.4)
}
/*(B)*/ .post_box img:hover {
    float: left;
    max-height: 220x;
    ...
    border-radius: 10px;
}
...
/*(C)*/ .post_box .logo {
    float: right;
    padding: 4px;
    ...
    box-shadow: 2px 2px 5px 0 #A9A9A9;
}
/*(D)*/ .post_box .logo img:hover {
    float: right;
    padding: 4px;
    ...
    box-shadow: 2px 2px 5px 0 #A9A9A9;
}
...

Vous êtes face à une petite erreur d'écriture d'un pointeur:
- (D) ne doit pas être ".post_box .logo img:hover", mais ".post_box img.logo:hover".

Ainsi au survol de souris, ce n'est pas le style D qui s'applique, mais uniquement le style B.
Vous avez pour le Logo (1) la boucle infinie suivante :
- Au repos, application du style C qui plaque à droite.
- Au survol, application du style B qui plaque à gauche.
- L'image n'est plus sous le pointeur de souris, donc application du style C qui plaque à droite.
- L'image revient sous le pointeur de souris, donc application du style B qui plaque à gauche.
- etc

D'où le scintillement.

Espérant que cette solution ait bien répondu à votre problème.
Bonne soirée et bon code...

Merci pour tout.

Cela marche très bien.

Pour autant je vais devoir me pencher de plus près sur le problème et la solution, pour ne pas refaire la même erreur.