Why is transform:scale not kept on :hover?

Question

I am using this CSS:

.link {
    transition: all .2s ease-in-out;
}
.link:hover {
    transform: scale(1.1);
}

When I hover the text, it's scaled to 110% as expected, but as soon as the transition is finished, it scales back to 100% even though the mouse pointer is still on the text.

When I remove the mouse pointer from the text, the animation scales to 110% then back to 100% in a flash.

See this fiddle for a demo.

How can I make it keep the 110% scale until the pointer leaves the text?

Answer 1

You need to define a link as display: inline-block, and add prefixes. CSS:

.link {
    display: inline-block;
}

.link:hover {
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1);
}

FIDDLE

Answer 2

Can you use Jquery ?

$(".link").hover(function(){ ... }); 

or maybe

$(".link").mouseover(function(){ ... });