Mon code qui contient du hover ne marche qu'à moitié

[Britney]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

Je fais ce sujet car j'ai un léger souci avec mon code composé de la propriété hover dont le résultat affiché est plus qu'approximatif.

Il fonctionne parfaitement sur jsfiddle mais impossible d'avoir le même résultat sur forumactif.

Voici le lien jsfiddle :

http://jsfiddle.net/Houny/1Lr7mhy4/

Voici le code html :

Code:

<div id="background">

<div class="bloc"></div>
<div class="bloc"></div>

</div>

Voici le code css :

Code:

<style type="text/css">#background {height: 200px; list-style: none; margin: 100px auto; width: 400px;} .bloc {background: red; float: left; height: 80px; margin: 0 20px 20px 0; width: 80px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s;} #background:hover .bloc {box-shadow: 0 0 15px 5px red; opacity: .25; -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8);} #background .bloc:hover {box-shadow: none;opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);}</style>

Je ne vois pas d'où peut venir l'erreur, ou bien c'est un problème d'incompatibilité...

[MlleAlys]

Bonjour,
Où souhaitez vous afficher ces codes ?
Si le code css va dans la feuille de style du forum, vous devez retirer les balises style :
http://jsfiddle.net/1Lr7mhy4/2/

[Britney]

Bonjour MlleAlys,

Dans l'édition d'un message, comme ici, avec bien évidemment le html d'activé.

[MlleAlys]

Si le css doit également être mis dans le message, faites ainsi ^^ :

Code:

<div id="background"> <div class="bloc"></div> <div class="bloc"></div> </div>

<style>#background:hover .bloc:hover{opacity:1;box-shadow:none;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)} .bloc{float:left;width:80px;height:80px;margin:10px;background:red;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s} #background:hover .bloc{opacity:.25;box-shadow:0 0 15px 5px red;-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}</style>

[Britney]

Ça marche presque nickel (ça empiète juste sur la signature), j'ai pas bien compris pourquoi :° tu peux stp m'expliquer brièvement ce que tu as modifié ? Et archiver une fois fait. ^^

En tout cas merci beaucoup !

[MlleAlys]

Ah oui pardon, j'ai oublié de remettre les dimensions du background ! Comme les éléments sont en float, ils n'ont plus de hauteur dans le bloc qui les contient, donc du coup, ça "dépasse" ^^"
Et pour tout à l'heure, j'avoue que je ne sais pas trop, une question de priorités peut être, j'ai changé l'ordre et ça a fonctionné ^^"

Code:

<div id="background"> <div class="bloc"></div> <div class="bloc"></div> </div>

<style> #background { height:100px; width:200px; } #background:hover .bloc:hover { opacity:1;box-shadow:none;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2); } .bloc { float:left;width:80px;height:80px;margin:10px;background:red;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s; } #background:hover .bloc { opacity:.25;box-shadow:0 0 15px 5px red;-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8); } </style>

[Britney]

D'accord merci, c'est super. Je mets en statut résolu du coup.