Podrías hacerlo anidando dos divs, y controlando mediante javascript, el "padding-top" del contenido.
- Un temporizador movería los valores de "padding-top" desde el "
positivo mayor", al "
negativo menor". (
onload="javascript:inicia();")
(volviendo al "
positivo mayor", una vez alcanzado el "
negativo menor".)
- Un evento "onmouseover", controlaría la parada del mencionado temporizador. (
onmouseout="javascript:para();")
- Un evento "onmouseout", volvería a hacer funcionar el temporizador. (
onmouseout="javascript:inicia();")
La funciónes javascript ("
inicia()", y "
para()"), con lo expuesto, se convierten en obvias.
Código :
<style type="text/css">
#input1{border:red 1px solid; width:200px; height:300px; overflow:hidden;}
#input2{border:blue 1px solid; width:190px; height:280px; margin-top:+300px;}
</style>
<body onload="javascript:inicia();">
<div id="input1" onmouseover="javascript:para();" onmouseout="javascript:inicia();">
<div id="input2">Contenido</div>
</div>
</body> 
