Buena tarde.
Tengo un
div principal que contiene a su vez otros divs. Cuando se pone el cursor encima sobre el div principal se activa una
animación de IDA con ayuda de JS. Y una
animación de VUELTA cuando se quita el cursor.
El código que a continuación pondré, funciona perfectamente con
Chrome,
Firefox y
Opera. Pero hace
extraños en
IE11.
Estos
extraños consisten en lo sig. Como decía, el div principal contiene otros divs, por ejemplo
A,
B y
C. Si se pasa el cursor de A a B, o de B a A, o la combinación que se les ocurra, se activa la
animación de VUELTA, como si quitáramos el cursor del div principal.
Los divs hijos, todos, están dentro del div principal, así que IE11 no debería ejecutar la
animación de VUELTA cuando pasamos de un div hijo a otro hijo, porque todos estos sub-divs están dentro del principal, del cual aún no hemos salido.
El código es un poco largo. Así que para que todo sea más breve, les pongo todo el código de una vez:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
html, body {width:100%; height:100%;}
/* Animación de IDA */
@-webkit-keyframes animation_1
{
0% {-webkit-transform:translateX(0%);}
20%, 24%, 100% {-webkit-transform:translateX(66%);}
22% {-webkit-transform:translateX(46%);}
55% {-webkit-transform:translateX(54%);}
}
@-ms-keyframes animation_1
{
0% {-ms-transform:translateX(0%);}
20%, 24%, 100% {-ms-transform:translateX(66%);}
22% {-ms-transform:translateX(46%);}
55% {-ms-transform:translateX(54%);}
}
/* Animación de VUELTA */
@-webkit-keyframes animation_2
{
0% {-webkit-transform:translateX(66%);}
20%, 24%, 100% {-webkit-transform:translateX(0%);}
22% {-webkit-transform:translateX(26%);}
55% {-webkit-transform:translateX(16%);}
}
@-ms-keyframes animation_2
{
0% {-ms-transform:translateX(66%);}
20%, 24%, 100% {-ms-transform:translateX(0%);}
22% {-ms-transform:translateX(26%);}
55% {-ms-transform:translateX(16%);}
}
.caja_1 {
position:absolute;
top:6%;
left:0%;
width:16%;
height:84%;
}
.caja_5 {
position:absolute;
top:20%;
left:-100%;
width:150%;
height:20%;
background-color:rgba(0,51,0,.7);
}
.caja_6 {
display:block;
position:relative;
top:9%;
margin-right:2%;
float:right;
width:30%;
height:80%;
background-color:rgba(0,0,0,.5);
}
.caja_7 {
display:block;
position:relative;
top:9%;
margin-right:2%;
float:right;
width:62%;
height:80%;
background-color:rgba(0,0,0,.5);
}
<script type="text/javascript">
function animar(objeto)
{
objeto.addEventListener('mouseover',function()
{
objeto.style.WebkitAnimationName = 'animation_1';
objeto.style.WebkitAnimationDuration = '500ms';
objeto.style.WebkitAnimationFillMode = 'forwards';
objeto.style.WebkitAnimationIterationCount = '1';
objeto.style.WebkitAnimationTimingFunction = 'ease';
objeto.style.msAnimationName = 'animation_1';
objeto.style.msAnimationDuration = '500ms';
objeto.style.msAnimationFillMode = 'forwards';
objeto.style.msAnimationIterationCount = '1';
objeto.style.msAnimationTimingFunction = 'ease';
},false)
objeto.addEventListener('mouseout',function()
{
objeto.style.webkitAnimationName = 'animation_2';
objeto.style.webkitAnimationDuration = '500ms';
objeto.style.webkitAnimationFillMode = 'forwards';
objeto.style.webkitAnimationIterationCount = '1';
objeto.style.webkitAnimationTimingFunction = 'ease';
objeto.style.msAnimationName = 'animation_2';
objeto.style.msAnimationDuration = '500ms';
objeto.style.msAnimationFillMode = 'forwards';
objeto.style.msAnimationIterationCount = '1';
objeto.style.msAnimationTimingFunction = 'ease';
},false)
}
<div class="caja_5" onmouseover="animar(this)">
