Css hover alternative (automatic)

Question

My CSS should change with a transition, and so far I have used the div:hover for this.

The transition should be activated when you click on another div , and not when you hover over a div that should move / change.

How can i do this?

thanks

Evert

Answer 1

You cannot handle click events on dom elements with css, you will need to use javascript to do this.

You can add a click event to the first div that fires when you click on it. As part of the event, you select another div and perform the transition.

Working demo

You can do this by adding a css transition class:

Html:

 <div id="clickme">1</div> <div id="changeMe">2</div> 

JavaScript:

 var el = document.getElementById('clickme'); el.onclick = function() { document.getElementById('changeMe').className = "transition"; }; 

CSS

 .transition{ /* transition css */ }