Aparecer y desaparecer elemento al entrar y salir

[javy7v]

Buenas gente,

Hacia tiempo que no tocaba JQUERY pero ahora lo necesito para hacer una cosilla y lo tengo muy oxidado.

A raiz de un problema de compatibilidad con IE 11 he llegado hasta aqui.

Lo que quiero es que cuando haga mouseover o entre sobre un elemento , haga aparecer otro elemento una <p> que esta en display:none por defecto.

Esto es lo que he intentado:

Código:

$(document).ready(function(){
   $(".circulos").mouseover(function(event){
      $(".menuIE").show("slow");
   });
   $(".circulos").mouseout(function(event){
      $(".menuIE").hide("slow");
   });
});

Código:

.menuIE{
display:none;
float:right;
}

Código:

<ul>
			<li class="circulos">
				<div class="ch-item ch-img-1">
					<div class="ch-info-wrap">
						<div class="ch-info">
							<div class="ch-info-front ch-img-1"></div>
							<div class="ch-info-back">
								<h3 id="iePrueba">Suspensiones Elasticas</h3>
								<p>Suspensiones Elasticas <a href="productos/suspensiones-elasticas">Ver productos</a></p>
							</div>	
						</div>
					</div>
				</div>
			</li>
			<li class="circulos">
				<div class="ch-item ch-img-2">				
					<div class="ch-info-wrap">
						<div class="ch-info">
							<div class="ch-info-front ch-img-2"></div>
							<div class="ch-info-back">
								<h3>Suspensiones Metalicas</h3>
								<p>Suspensiones Metalicas <a href="productos/suspensiones-metalicas">Ver productos</a></p>
							</div>	
						</div>
					</div>
				</div>
			</li>
			<li class="circulos">
				<div class="ch-item ch-img-3">				
					<div class="ch-info-wrap">
						<div class="ch-info">
							<div class="ch-info-front ch-img-3"></div>
							<div class="ch-info-back">
								<h3>Acoplamientos Elasticos</h3>
								<p>Acoplamientos Elasticos <a href="productos/acoplamientos-elasticos">Ver productos</a></p>
							</div>	
						</div>
					</div>
				</div>
			</li>
			<p class="menuIE">Suspensiones Elasticas</p>
			<p class="menuIE">Suspensiones Metalicas</p>
			<p class="menuIE">Acoplamientos Elasticos</p>
		</ul>

Lo que quiero hacer es eso que al entrar en ese <li> , aparezca la <p> que por defecto esta en display none.

Si solo hago el show funciona bien pero claro quiero que al salir del <li> desaparezca pero estando como esta ahora , hace un efecto de bucle raro que sale entra sale entra...

Gracias!

[TrinityCore]

Intenta con mouseenter y mouseleave

[javy7v]

Iniciado por TrinityCore

Intenta con mouseenter y mouseleave

Gracias , en efecto el problema que comentaba se soluciona con usando lo que dices.

Pero ahora me sale otro y creo que es directamente porque lo estoy planteando mal...

Veamos yo tenia una animación que no funciona en IE 11 por eso estoy buscando otra alternativa , ahora la cosa esta asi:



La idea era eso que cuando haga mouseenter desaparezca el centro de la imagen y aparezca el texto que sera un enlace para ir a una seccion que estaba como display:none;

Pero claro cuando me voy a poner sobre el enlace , estoy saliendo del otro elemento y desaparece el enlace

A alguno se le ocurre como plantear esto bien ? O algun otr efectillo y no complicarme tanto la vida nose...