Mauvais rendu suite à hover

Bonjour les gens,

Je demande votre aide car je suis sur un soucis auquel je ne connais ni la raison, ni la solution.
Je suis en train de reproduire le "Search Cool Effect" de Kushagra Agarwal (http://cssdeck.com/labs/super-cool-s...ng-css3-and-js),
évidemment je le modifie à ma sauce.
Il s'agit d'un champs Recherche où l'on clique sur la loupe qui affiche alors l'input de recherche, puis on clique enfin sur la loupe pour lancer la recherche. (voir lien plus haut de l'auteur)

Ce que je voudrais, c'est qu'au lieu d'avoir un background qui change lors du hover, ce soit directement la loupe qui change de couleur (la loupe est directement créé dans le CSS).
J'arrive à le faire sans soucis (line 30 du CSS via le lien plus bas) mais le problème c'est au niveau du rendu.
Quand on hover la loupe avec la souris, que ce soit sur FF ou Chrome, la loupe change bien de couleur mais a un rendu assez crade, comme si elle avait une fine bordure blanche.
Le truc c'est que une fois qu'on clique sur la loupe pour afficher l'input et qu'on hover la loupe, le rendu est niquel et la loupe est dans un beau bleu.

Vous pouvez voir le code et agir dessus via ce lien :

http://cssdeck.com/labs/bb0hul8a

Du coup, pourquoi un tel rendu se produit ? :cry: Surtout que le code qui hover la loupe est le même qui agit aussi sur l'hover de la loupe une fois l'input affiché ?

Merci d'avance :P

Bonsoir,

Je n'ai décortiqué ton code dans les détails (j'avoue la flemme de lire le JS :aie:) mais j'ai constaté ceci:

Si tu regardes bien, tu verras que ta loupe blanche a aussi le "rendu crade fine bordure blanche" avant le clique.

Maintenant, si tu vires dans ton html la ligne

Code:

---

<label for="submit" class="submit"></label>

---

Tu verras ta loupe redevenir belle sans sa bordure blanche. Par contre, quand tu cliques, plus de loupe...

J'en déduis que, la loupe après clique est affichée derrière celle de départ et, vu qu'elle est blanche, elle est à l'origine de la bordure. Sur l'exemple de base, il y a un fond donné, ce qui empêche de voir celle de derrière par transparence et donc l'effet "crade".

Un contournement simple est d'attribuer la couleur de ton body à ton form .icon, form .submit :

Code:

---

form .icon, form .submit { width: 35px; height: 35px; display: block; position: absolute; top: 0; right: 0; background-color:#212121; }

---

Ahh super ! On (toi et moi) a résolu le soucis :D

J'ai fait des tests et effectivement, c'est le label .submit qui pose problème, qui semble être toujours présent derrière comme tu le disais,
sachant que même un display:none ou un opacity:0 dans son champs de css ne changeait rien.

Effectivement, mettre un background sur le form enlève le problème, mais l'endroit où je dois mettre cette loupe sur la page possède un background avec un opacity de 0.5, donc on voit le background de la loupe.

Du coup, sans utiliser de background, pour soigner le mal, il faut utiliser le mal !
J'ai rajouté dans le JS un fadeOut('1') sur le label .submit à l'entrée de la page.
Et ça marche ! Pour le coup, le label a vraiment disparu.
Évidemment, il ne faut pas oublier de le remettre quand on clique dessus, donc un fadeIn('1') dans la fonction click et voilà.
C'est pas très classe mais ça fonctionne ;)

Voir là :
http://cssdeck.com/labs/bb0hul8a

Par contre, je ne sais toujours pas pourquoi un display:none ou un opacity:0 restait inactif sur le label...

Merci à toi :)