CSS :hover plus dynamique ?

[Zefling]

J'étais en train de me demandé s'il n'y avait pas une proposition du genre pour le CSS pour éviter de passer par du javascript pour :hover.

La plus part du temps, j'aimerais que l'effet :hover ne soit pas instantané, qu'il y est une demi-seconde pour qu'il se déclange, et de même lors que je le quitte, pour certains trucs c'est assez agaçant de voir l'objet disparaître instamment dès que la souris le quitte par inadvertance.

Il n'y aurai pas un truc de prévu du genre ? :

Code : Tout sélectionner

.maclass :hover(500, 500) span {
     »instructions«
}

Avec la première valeur en temps de latence en milli-seconde pour « in » et l'autre pour « out ».
Il pourrait en être de même pour :active ou :focus.

Édit : L'idée se serait de pouvoir arriver à ça, sans passer par Jquery :
http://cherne.net/brian/resources/jquer ... ntent.html

[Asumbaa]

Salut,

Ben oui c'est prévu dans CSS3, ça s'appelle les transitions et ça fait drôlement envie

[Zefling]

C'est pas exactement ça que je veux. D'ailleurs si ça s'anime pas je m'en fous. C'est le temps de réaction avant de faire le :hover ou l'en quitter.

Genre de glisse pendant un court instant hors de la zone, il ne fait pas l'action si j'y retourne rapidement.

Je ne suis pas sûr que ce soit possible avec translation.

Édit: d'ailleurs dans translation je remarque qu'il n'y a pas de notion de in et out. Donc il fait une chose dans un sens puis la même dans l'autre.

[calimo]

Pour ma part je ne comprend pas que :hover fasse partie du CSS. C'est de l'interaction/dynamique, donc javascript, et ça ne devrait rien avoir à faire dans une feuille de style.
Ne parlons même pas des transitions

[Zefling]

C'est une façon de voir les choses, ça reste du design. Après c'est vrai qu'entre le JS et le CSS... Mais personnellement, je préfère que ça soit dans le CSS parce que reste de la mise en forme. De toute façon ça fait longtemps que le HTML ne fait plus de la mise en forme de document mais d'applications sur le web.

[Benoit]

C'est une pseudo-classe au même titre que :selected ou :focus, ça a tout son sens pour indiquer qu'une interaction est possible avec un élément. Typiquement, pour changer le curseur de la souris et indiquer la grandeur de la zone cliquable, ce qui peut être très important pour l'accessibilité. D'autant que, la résolution augmentant, le curseur seul devient de plus en plus petit et difficile à localiser sur l'écran.

[Zefling]

Quoi qu'il en soit, j'aimerais avoir une latence, pour que ça ne soit pas instantané sur certains éléments, au même titre qu'une Infobulle n'apparait pas instantanément. Mais visiblement à par avec du JS, y'a pas (bref, c'est ce que je fais déjà).

[bobo]

Quoi qu'il en soit, j'aimerais avoir une latence, pour que ça ne soit pas instantané sur certains éléments, au même titre qu'une Infobulle n'apparait pas instantanément. Mais visiblement à par avec du JS, y'a pas (bref, c'est ce que je fais déjà).

J'ai l'impression qu'une transition ferait l'affaire dans ton cas. Il me semble qu'il est possible d'avoir un effet retard qui correspond à ce que tu veux.
Edit :

# transition-delay pour indiquer à partir de combien de temps la transition doit être faite, à partir du moment où la valeur est changée.

ref: http://ljouanneau.com/blog/post/2009/10 ... itions-CSS

[Zefling]

C'est presque ça, sauf que ça marche pas avec display:block; / display:none; et qu'on peu pas choisir le temps d'entrée ou de sortie c'est le même.

Après je pourrais bien jouer avec les effets en foutant une transition à 0s sauf que ça ne fonctionne pas site je mets des height:auto ou width:auto.

(J'ai testé sur Minefield 3.7 ^_^')