Me pregunto si es posible cambiar el estilo del elemento secundario cuando se desplazó su elemento, mientras que su css también se diseñó cuando se desplazó su elemento principal.
Para aclarar mi pregunta, escribí un código básico a continuación:
//styling child while mouse is inside child element $('child').on('hover', function(e){ if (e.type == 'mouseenter'){ $(this).css('background','yellow'); } }) // styling child while mouse is inside parent $('child').parents().on('hover', function (e){ if (e.type == 'mouseenter'){ $(this).css('background', 'blue'); } })Entonces, básicamente, una vez que el usuario ingresa al espacio del padre para hacer que el fondo del niño sea azul, y una vez que ingresa al espacio del hijo para cambiar de fondo azul a amarillo.
Vi un comentario sobre por qué no uso css, así que esta es una pequeña explicación: no puedo seleccionar el elemento principal. Solo puedo hacerlo desde niño usando padres (). Y mientras css no sea compatible con el método parent(), opté por jquery. :)
CSS solo:
div { padding: 20px; border: 1px solid black; } /* something hovered that have .child as direct child => change .child color to blue */ *:hover > .child { background-color: blue; } /* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */ .child:hover { background-color: yellow; } <div> PARENT <div class="child">CHILD</div> </div> <div> PARENT <div class="child">CHILD</div> </div> <div> PARENT <div class="child">CHILD</div> </div>¿Es ese el comportamiento que esperas?
$('#child').parent().on('mouseover', function(e){ if(this===e.target){ $(this).children().css('background','blue'); }else{ $(this).children().css('background','yellow'); } }).on('mouseout', function(e){ $(this).children().css('background', 'green'); }); #parent{ width:200px; height:100px; background-color:#f00; } #child{ width:30px; height:30px; background-color:green; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> <div id="child"></div> </div>