Por que é transformar: escala não mantida: pairar? - css, transição

Eu estou usando este CSS:

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

Quando eu passar o texto, ele é dimensionado para 110% como esperado, mas assim que a transição é concluída, ele volta a 100%, mesmo que o ponteiro do mouse ainda esteja no texto.

Quando eu removo o ponteiro do mouse do texto, a animação aumenta para 110% e volta para 100% em um flash.

Vejo este violino para uma demonstração.

Como faço para manter a escala de 110% até o ponteiro sair do texto?

Respostas:

Você precisa definir um link como display: inline-blocke adicione prefixos. CSS:

.link {
display: inline-block;
}

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

FIDDLE

Você pode usar o jQuery?

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

ou talvez

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