Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/04/2016, 05:43
javy7v
 
Fecha de Ingreso: abril-2015
Mensajes: 189
Antigüedad: 9 años, 7 meses
Puntos: 14
Aparecer y desaparecer elemento al entrar y salir

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!