• Changer d'opacité au survol

    Ce tuto peut-être particulièrement utile avec cette autre tuto, car, si un élément n'est pas entièrement opaque, le rendre opaque au survol de la souris peut donner un effet "aérer" au blog.

    #SÉLECTEUR:hover {
    opacity: OPACITÉ (EX:1);
    }

    "SÉLECTEUR" sert à déterminer quel élément modifier, "hover" est la valeur utilisé pour désigner un survol de la souris. Voivi un exemple de code:

    #menubar:hover {
    opacity:1;
    }

    C'est bien beau, mais c'est instantané..., pour déterminer le temps entre chaque opacité, on peut rajouter ce code:

    -webkit-transition: TEMPS DE LA TRANSITIONs;
    -moz-transition: TEMPS DE LA TRANSITIONs;

    Remplacez "TEMPS DE LA TRANSITION" par le temps que vous voulez entre la transparence et l'opacité. "-webkit-" est utilisé pour que le code marche sur internet explorer et "-moz-" est utilisé pour que ça marche sur mozilla firefox, mettez le même temps au deux de préférence. Ce qui peut donner:

    #menubar:hover {
    opacity: 1;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    }

    Quand la souris ne survol plus l'élément, la transparence revient sans temps de transition, pour qu'il revienne en mettant un certains temps, rajoutez ce code à l'élément, mais cette fois-ci, sans "hover", ce qui donne, par exemple avec la menubar:

    #menubar {
    opacity: 0.5;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    }

  • Commentaires

    1
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 18:10

    faut garder le mot opacité au tt début?

    2
    Lundi 30 Juillet 2012 à 18:10
    3
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 18:13

    oki tu t'en sors avec ma barre????

    4
    Lundi 30 Juillet 2012 à 18:20

    je verrais ça plus tard... pas le temp là!

    5
    Lundi 30 Juillet 2012 à 18:20

    et puis, surtout, il y a le tuto, tu n'as qu'a te servir d'eux!

    6
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 18:25

    ou ça???

    7
    Lundi 30 Juillet 2012 à 18:35

    dans ma partie css, la menubar, mais j'ai pas le temps!!!

    8
    vanille110 Profil de vanille110
    Dimanche 2 Juin 2013 à 15:34

    et pour faire avec les images on fait comment ? et je voudrai aussi enfaite que ce soit le contraire : dès que la souris survole limage qu'elle soit opaque si possible 

    (le contraire quoi ) ^^

    9
    The Hell Profil de The Hell
    Lundi 17 Juin 2013 à 19:11

    Vanille110 pour faire le contraire il faut juste changer inverser le "1" et le "0.5" pour faire normal et après opacité ^^

     

    10
    vanille110 Profil de vanille110
    Lundi 17 Juin 2013 à 20:10

    ah daccord merci :)

    11
    Lundi 20 Juillet 2015 à 04:57

    Il y aurai t'il une astuce pour faire un changement doux de quand on enléve la souri aussi, car tu as mis uniquement quand on la passe la premiere fois ?



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :