Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

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

Résolu Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Mysticals le Mer 20 Avr 2016 - 2:43

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.the-elder-scrolls-by-mysticals.com/

Description du problème

Salutation !

Je teste un moyen de visionner des images ( je ne m'en sort pas avec les codes des diaporama ), et actuellement je bute sur ceci :

Lorsque je clique sur mon image, il faut garder la souris enfoncée pour quelle reste zommée sur le coté, si on relâche, elle disparait.

Hors je voudrais qu'elle reste, et disparaisse soit avec un autre clic, soit un clique ailleurs.

Le sujet du test : http://www.the-elder-scrolls-by-mysticals.com/t463-test

Le CSS associé aux images :
Code:
.testimage { width:100%;}
.testimage:active { z-index:999;margin-bottom:10px;position:fixed; height:100%;width:auto;top:10px; left:10px;border: 2px solid #000000;}

Merci !

PS : avec un click-glissé, l'image reste, mais c'est surement un bug.


Dernière édition par Mysticals le Jeu 21 Avr 2016 - 14:08, édité 1 fois

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Mysticals le Jeu 21 Avr 2016 - 1:30

Up !

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Neptunia le Jeu 21 Avr 2016 - 2:52

Bonjour ^^


Le pseudo-élément :active ne concerne que ce qu'il se passe au clic.
Essayez plutôt le pseudo-élément :hover pour épargner votre souris (et/ou votre doigt)

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Mysticals le Jeu 21 Avr 2016 - 3:07

C'était la première chose que j'avais fait :hover. Le soucis, c'est que comme l'image change de place au survol, l'effet :hover cause un tremblement, l'image apparait et disparait très rapidement et indéfiniment.

Puis j'aimerais que l'image reste quand on continue de naviguer, cela fonctionne actuellement avec une astuce, rester enfoncer et glisser, mais c'est pas le top.

EDIT : J'ai mis hover pour que tu vois ce que ça provoque. http://www.the-elder-scrolls-by-mysticals.com/t463-test dès qu'on bouge le curseur, on a ce défaut, c'est assez désagréable.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Neptunia le Jeu 21 Avr 2016 - 5:50

@Mysticals a écrit:Puis j'aimerais que l'image reste quand on continue de naviguer, cela fonctionne actuellement avec une astuce, rester enfoncer et glisser, mais c'est pas le top.

Pour ce point ce n'est pas possible par le CSS, il faudra passer par un javascript et je n'ai pas la moindre idée de comment parvenir à ce genre de résultat.
Ou bien un plugin jQuery qui ouvrirait l'image en taille réelle dans une fenêtre surgissante.

Pour ce qui est du hover et vu que c'est l'image qui se déplace (je pensais naîvement qu'il y avait deux images) il faudrait appliquer le hover au niveau de la cellule et non de l'image. Rajouter un class aux cellules et utiliser plutôt un code du genre.
Code:
td.testimage:hover img {
...
}
Dans cet exemple non testé, je pars du principe qu'au lieu d'attribuer un class à l'image, on l'attribue à sa cellule.
Il ne devrait plus y avoir de clignotement tant que le curseur survole la cellule sans en sortir.

Neptunia
+ Hyperactif +

Féminin
Messages : 10395
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Je souhaite la fonction :active dans mon CSS le reste si on relache la souris

Message par Mysticals le Jeu 21 Avr 2016 - 13:20

Parfait, merci beaucoup!

Pour l'histoire de garder l'image pendant la navigation, je parlais sur la page actuelle, pas sur tout le site.

Mysticals
***

Masculin
Messages : 194
Inscrit(e) le : 25/12/2012

http://www.the-elder-scrolls-by-mysticals.com/
Mysticals 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