CSS how to make blink icon go and back?

Asked

Viewed 742 times

3

Hello I want a help in this CSS code I want that when the person hovers over the ngç, the icon (image ex:heart) appears and when mouse leaves that place the icon (image ex:heart) sum, I tried display:None but it did not work

here is the css:

.ask-data .action a.ask-share, .ask-data .action a.ask-like {
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
    line-height: 14px;
    padding: 5px 4px 4px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
}
.ask-data i.like {
    background-image: url("../img/ask.png?x=2");
    background-position: -73px -93px;
}
.ask-data i.like:hover {
    background-image: url("../img/ask.png?x=2");
    background-position: -73px -108px;
}
css

  • Might explain your problem better

  • @Marcelobatista Yes, look I have a site in it has an icon and a flag, I want to make it disappear and appear when someone hovers over, tendeu?

  • What is "ngç," you have HTML, can make things easier.

  • @hugocsl want to do that even this site askmee.Tk/zero0 the flag in the question hovers over see how it appears

1 answer

0

Use the element opacity, because it doesn’t disappear with the element, it just hides, being possible to use listeners, remembering that opacity accepts only the alpha, I mean, it goes from 0 to 1.

.ask-data i.like {
    opacity: 0;
}
.ask-data i.like:hover {
    opacity: 1;
}

  • not that, look at this site http://askmee.tk/zero0 the flag on the questions hovers the mouse on top see how it appears

  • So you want to change the color?

  • There it uses an image if you go to see I want to make icone appear when mouse arrives on that edge without needing this exactly on the icon

  • in this case you need the icon to be the child of the container. So the code would look something like this: .container:hover i.like {opacity: 1; }, because the overlay event is tied to the container, and not to the item.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.