Is possible use active css in a image??

[tallerwp]

I use hover effect in a image, but is possible add active? It is not work.

img.mapa:hover, img.mapa:active {opacity: 0.5;}

Thank you

[Paulie_D]

Yes, it is….but it depends on what you are trying to do

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button and ends when it is released.

Recall that you can’t set :active without pressing the mouse button and at that stage you are already hovering the image.

So your code..is doing the same thing twice.

If you want to make the image half transparent on :hover and then more transparent on :active then you have to have a second opacity setting for the latter.

https://codepen.io/Paulie-D/pen/baggYR

[tallerwp]

No, it is not my case.

I have 5 images in horizontal, when the user click in a image show text above. If I click other image show other text.

Then, I need to show with opacity what image is active now. No mouse effect. The mouse is stop.

Do you understand me?

thank you for you help.

[Paulie_D]

Yes but that’s not what the :active pseudo-class does.

It only works when you click down on an element and comes off when you release the mouse button.

What you seem to be wanting to do is select the image with a click and indicate it as the current item.

For that you need Javascript.

[Shikkediel]

Maybe it could be done with the checkbox hack?

[tallerwp]

What is checkbox hack?

Do you know how to do it in Javascript?

[Shikkediel]

It’s likely quite easy with JS, provided there’s a demo. The checkbox hack would be a lot more intricate but requires only CSS. A bit too elaborate to explain, you might want to google it.

[Author]

Posts