CODEWITHSUNDEEP
csshover
Bruno Lustro
Bruno Lustro

Reputation: 3

Replacing hover, for a click event css only

On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.

Thanks, Bruno

Upvotes: 0

Views: 200

Answers (2)

Icepick
Icepick

Reputation: 156

It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link

<a href="#" tabindex="0">
    <img src="1.png">
</a>

On your CSS:

a:focus img{
    content:"xxx";
    width:XXpx;
    height:XXpx;
    /*Whatever you need here*/
}

Upvotes: 0

Martin Malinda
Martin Malinda

Reputation: 1608

Stuff you can do with the “Checkbox Hack”

It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.

Upvotes: 1

Related Questions