Seguinte:
Tenho uma div que vou usar como dropdown de um menu. Nessa mesma div uso dois efeitos em jQuery:
$(document).ready(function(){ $("#hoverAMissel").mouseover(function () { $("#dropDown1").show("slow"); }); }); $(document).ready(function(){ $("#dropDown1").mouseout(function () { $("#dropDown1").hide("slow"); }); });
<div id="divMenu"> <div id="divMenuPosition"> <li><a class="hoverBtn" href="#" style="width: 60px;"><img src="../img/general/menu/menu_home.png" border="0" /></a></li> <li id="hoverAMissel"><a class="hoverBtn" href="#" style="width: 76px;"><img src="../img/general/menu/menu_aMissel.png" border="0" /></a></li> <li><a class="hoverBtn" id="hoverSolucoes" href="#" style="width: 79px;"><img src="../img/general/menu/menu_solucoes.png" border="0" /></a></li> <li><a class="hoverBtn" id="hoverNossosClientes" href="#" style="width: 120px;"><img src="../img/general/menu/menu_nossosClientes.png" border="0" /></a></li> <li><a class="hoverBtn" id="hoverConsultores" href="#" style="width: 98px;"><img src="../img/general/menu/menu_consultores.png" border="0" /></a></li> <li><a class="hoverBtn" id="hoverNaMidia" href="#" style="width: 80px;"><img src="../img/general/menu/menu_naMidia.png" border="0" /></a></li> <li><a class="hoverBtn" id="hoverNossoContato" href="#" style="width: 112px;"><img src="../img/general/menu/menu_nossoContato.png" border="0" /></a></li> </div> </div> <div id="dropDown1"> </div>
Até aí, perfeito!
Mas, se insiro uma pseudo-classe, div, img ou qualquer coisa parecidade dentro dessa div e passo com o mouse por cima de uma dessas quando a div tá aberta, ela responde como mouseOut!
Como posso fazer pra que o conteúdo da div não altere as ações da mesma quando passo por cima com o mouse?