All geek questions in one place

Can I use: hover to launch CSS3 animations (or transitions) that continue to work even when the mouse no longer hovers

I create a list of links where one container of the container expands when it hangs (with details, image and description). I have no problem animating it with css transitions or animations.

The problem is that I would like it to remain expanded even after the mouse is gone. And I would like to do this without javascript.

Is it possible? Thanks!

+6
source share
4 answers

No, this is not possible, because each css that will be applied when you hover over the mouse ( :hover ) will be deleted with the mouse, and there is no other way to capture the mouse and exit.

 #animate:hover { /* ex. -webkit- -moz- -ms- -o-​ */ animation: animation 2s infinite; /* will be directly aborted on mouseout :( */ }

So, for this you have to use JavaScript.

+1
source

http://www.impressivewebs.com/css3-transitions-javascript/ This article has a demo showing how you could save animations by adding / removing a class as needed. What you could do is keep the current transition :hover in place as a return, but for those who have JavaScript, also apply the same styles to the pseudoHover class or something like that.

Then using JavaScript (jQuery shown below) add a class when you hover over an element, a very simple example here: http://jsfiddle.net/btg5y/ p>

HTML:

 <div id="list"> <p>Hover over me!</p> <ul> <li>item 1</li> <li>item 2</li> </ul> </div> <p>Click anywhere here to remove the hover</p>

JS:

 $('#list').hover(function() { $('ul', this).addClass('pseudoHover'); }); $(document).click(function() { $('#list ul').removeClass('pseudoHover'); });

CSS

 ul { background-color: #F00; height: 0; overflow: hidden; transition: height 1s; -webkit-transition: height 1s; } #list:hover ul, .pseudoHover { height: 50px; }

JavaScript is only used to add and remove a class as optional to preserve the state you require. If you do not have JavaScript, then only :hover works.

Other than that, I don’t see how you do it with just CSS.

+1
source

If you really need to avoid javascript, you can add a delay to stop the expanded box from its original size longer.

In a separate note, it is worth adding: action, as well as: hover over people using touch devices.

Here I just did it in 3 seconds. It will revert to its original size after the specified time, but may help depending on what you need.

 <!DOCTYPE html> <html> <head> <style> .div{ height:100px; width:50px; background:red; transition: width 0.5s ease; transition-delay:3s; } .div:hover, .div:action { width:400px; transition: width 0.5s ease; } </style> </head> <body> <div class="div"></div> </body> </html>

Cheers, Mark

+1
source

Instead of using: hover, you can do this using the :target pseudo- :target .

Check fiddle

Note. To use this method, you will need a modern browser. (IE9 +)

Also, take a look at this article , which shows some clever ways to simulate click events using css (one of them is: target pseudo class.

+1
source

Source: https://habr.com/ru/post/912855/

More articles:


All Articles