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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Britney le Dim 21 Juin 2015 - 18:05

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é...


Dernière édition par Britney le Dim 21 Juin 2015 - 22:12, édité 1 fois

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par MlleAlys le Dim 21 Juin 2015 - 18:11

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/


Dernière édition par MlleAlys le Dim 21 Juin 2015 - 18:17, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par Britney le Dim 21 Juin 2015 - 18:16

Bonjour MlleAlys,

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

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par MlleAlys le Dim 21 Juin 2015 - 18:24

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>

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par Britney le Dim 21 Juin 2015 - 21:17

Ç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 ! Smile

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par MlleAlys le Dim 21 Juin 2015 - 21:58

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>

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mon code qui contient du hover ne marche qu'à moitié

Message par Britney le Dim 21 Juin 2015 - 22:12

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

Britney
Nouveau membre

Messages : 20
Inscrit(e) le : 03/08/2012

http://forum-test-asylum.forumactif.org/
Britney a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum