Ceci est mon site: GutdesignjQuery et paginator: hover
Cliquez sur TV sur le côté gauche. Vous voyez maintenant la liste des projets. Tout est bon pour moi, mais comment faire pour cacher ces flèches orange au départ? Je veux les montrer quand l'utilisateur déplace la souris sur cette zone (effet hover). Mais comment?
CSS « display: none; » puis sur le vol stationnaire « display: block; » styles ne fonctionne pas :(Une idée pourquoi?
Ajouter opacity: 0 à .left_arrow et .right_arrow puis créer une nouvelle règle, .left_arrow:hover et .right_arrow:hover, et ajouter opacity: 1 à cette règle.
// filter is used for IE8 and earlier
.left_arrow, .right_arrow
{
opacity: 0;
filter: alpha(opacity = 0);
}
.left_arrow:hover, .right_arrow:hover
{
opacity: 1;
filter: alpha(opacity = 100);
}
je partirais avec sprites. vous faites une image qui a la flèche dans le fond et est vide en haut, et que vous utilisez position d'arrière-plan pour montrer la moitié que vous voulez.
Exemple (je ne vois pas la page pour que les noms de classe ne sont une référence):
.left_arrow a {background-image:url('../img/img.png')}
.left_arrow a {background-position:0px 0px}
.left_arrow a:hover {background-position:0px -72px}
Plus sur sprites: http://css-tricks.com/158-css-sprites/
Quelque chose comme ça: http://jsfiddle.net/26MVV/ (jQuery plein)?
L'opacité ne fonctionne pas dans IE – Yisela