Can I use :hover to trigger a CSS3 animation (or transition) which keeps running even when the mouse is no longer hovering

css css-transitions css-animations

11,396

Solution 1

No it's not possible because every css that will be applied on mouseover ( :hover ) will be removed on mouseout and there is no other way to capture mouseover and out.

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

So you should use JavaScript for that.

Solution 2

http://www.impressivewebs.com/css3-transitions-javascript/ This article has a demo that shows how you could keep the animation going by adding/removing a class as you need. What you could do is keep your current :hover transition in place as a fall back, but for those with JavaScript, also apply the same styles to a class pseudoHover or something.

Then with JavaScript (jQuery shown below) add the class when you hover over the element, very basic example here: http://jsfiddle.net/btg5y/

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;
}

The JavaScript is just used to add and remove a class as necassary to persist the state you require. If you don't have JavaScript, then only the :hover will work.

Other than that, I can't see how you would do this with just CSS.

Solution 3

If you really need to avoid javascript you can add a delay to stop your expanded box from reverting to it's original size for a length of time.

On a separate note its worth adding a :action as well as a :hover for people using touch-screen devices.

Here I've just done it for 3 seconds. It will revert back to the original size after the specified time but could 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

Solution 4

Instead of using :hover you could do this using The :target pseudo class.

Check out this fiddle

Note: You'll need a modern browser to use this method. (IE9+)

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

View more solutions

11,396

Author by

Jaska

Updated on June 06, 2022

Comments

Jaska almost 2 years

I'm creating a link list where one link container expands when hovering it ( with details, image and description). I have no problems to animate it with css transitions or animations.

The problem is that I would like it to stay expanded even after the mouse moves away. And I would like to do it without javascript.

Is that possible? Thanks!