effect :Hover and :active for image

Asked

Viewed 1,064 times

3

As you can see in the code below, I have 3 links with an image in each of them, which direct to a iframe below. These images are in grayscale, but when you mouse over them they are colored thanks to the class ".footstep". But I would like the effect that Hover does to stay permanent until I click elsewhere, it is possible to do this only with html and css?

        <a href="passo1.html" target="janela">
            <img id="passo1" class="passo" src="img/passo_color1.png" style="float:left">
        </a>
        <a href="passo2.html" target="janela">
            <img id="passo2" class="passo" src="img/passo_color2.png" style="left: 348px; float:left; position: absolute">
        </a>
        <a href="passo3.html" target="janela">
            <img id="passo3" class="passo" src="img/passo_color3.png" style="left: 685px; float:left; position: absolute">
        </a>

Hugs !!

html css hover

  • Can Diego make a jsFiddle as an example? So it’s easier to test and you’ll get help faster.

  • I’m a beginner, I have no idea what Jsfiddle is

  • http://jsfiddle.net include your html/css/js (if you have) codes in the target fields and save, generating a link that can be shared

  • @Sergio I would create an event onmouseover in the image that added the color effect and another event onclick no body to remove all classes.

1 answer

3

Well, here’s an example of what I understood you want: Jsfiddle

It was not clear to me the "other place" that it is necessary to click in order for the state Hover to come out, so I just made a model that keeps the state Hover (using the property transition-delay) coloring a grayscale image. 

.passo {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */     
  transition:0s 180s;
}

.passo:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  transition:0s;
}

References:

Grayscale

Maintain Hover effect

  • Apparently that’s it. This example works if you have more images?

  • 1

    Of course: http://jsfiddle.net/nr6LpLqb/2/

Browser other questions tagged html css hover

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