MouseOver et MouseOut en CSS

Question

MouseOver et MouseOut en CSS

pour utiliser la souris dans un élément, nous utilisons le :hover attribut CSS. Pourquoi pas pour la souris hors de l'élément?

j'ai ajouté un effet de transition sur l'élément à modifier la couleur. L'effet hover fonctionne bien, mais quel attribut CSS dois-je utiliser pour appliquer l'effet avec la souris? Je cherche une solution CSS, pas une solution JavaScript ou JQuery.

10

css html5

demandé sur stalepretzel 2013-08-28 20:27:48

4 réponses

score 29 · Answer 1

Voici la meilleure solution, je pense.

CSS onomouseout:

div:not( :hover ){ ... }

CSS onmouseover:

div:hover{ ... }

C'est mieux, parce que si vous devez définir des styles que onmouseout et d'essayer de le faire de cette façon

div { ... }

vous définirez vos styles et pour onmouseover aussi.

score 20 · Answer 2

CSS lui-même ne supporte pas un mousein ou mouseout sélecteur.

:hover selector s'appliquera à l'élément lorsque la souris le survole, ajoutant le style lorsque la souris entre et supprimant le style lorsque la souris sort.

l'approche la plus proche est de définir les styles que vous placeriez dans mouseout dans votre style par défaut (non-hover). Lorsque vous passez la souris sur l'élément les styles à l'intérieur de hover prend effet, émulant un mousein, et lorsque vous déplacez votre souris de l'élément les styles par défaut prendront effet à nouveau, émulant mouseout.

Voici un exemple, prises à partir de ici:

div {
    background: #2e9ec7;
    color: #fff;
    margin: 0 auto;
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in;
    -moz-transition: -moz-border-radius 0.5s ease-in;
    -o-transition: border-radius 0.5s ease-in;
    -ms-transition: border-radius 0.5s ease-in;
    transition: border-radius 0.5s ease-in;
    text-align: center;
    width: 200px;
}


div:hover {
    background: #2fa832;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
}

transition s défini pour le div:hover le style prend effet lorsque la souris entre (et hover est appliquée). transitions div style prendra effet lorsque la souris quitte (et hover est supprimé). Cela se traduit dans le mousein et mouseout transitions être différent.

score 6 · Answer 3

je pense que j'ai trouvé la solution.

.class :hover {
    /*add your animation of mouse enter*/
}

.class {
    /*
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out
    */
}

il suffit de l'essayer... :)

score 1 · Answer 4

Vous avez seulement besoin de l' :hover, quand la souris sort de l'élément, il retourne à son état par défaut non-:hover, comme ceci:

.class { color: black; } 
.class:hover { color: red; }

quand vous planez, la couleur sera rouge et quand vous "mouseout", la couleur retournera au noir parce qu'elle ne correspond plus à la :hover sélecteur. C'est le comportement par défaut pour tous les navigateurs, rien de spécial que vous devez faire ici.

Las etiquetas más populares

MouseOver et MouseOut en CSS

4 réponses