0

Tengo este código:

function celular(){	
	$("#celu").css("display", "inline-block")  }		 
function email(){	
	$("#mail").css("display", "inline-block")  }
function telefono(){	
	$("#fono").css("display", "inline-block")  }
function gmail(){	
	$("#gma").css("display", "inline-block")  }

function Mouseva() {
	$("#celu").css("display", "none")  }
function Mouseva1() {
	$("#mail").css("display", "none")  }
function Mouseva2() {
	$("#fono").css("display", "none")  }
function Mouseva3() {
	$("#gma").css("display", "none")  }
	<div class="social">
		<ul id="social">
			<li><a href="mailto:[email protected]" class="icon-google-plus"  onmouseenter="gmail()" onmouseleave="Mouseva3()"><p id="gma">[email protected]</p></a></li>
			<li><a href="" class="icon-phone" onmouseenter="telefono()" onmouseleave="Mouseva2()"><p id="fono">1111111</p></a></li>
			<li><a href="" class="icon-skype" onmouseenter="email()" onmouseleave="Mouseva1()"><p id="mail">[email protected]</p></a></li>
			<li><a href="" class="icon-whatsapp" onmouseenter="celular()" onmouseleave="Mouseva()"><p id="celu">11111111</p></a></li>
		</ul>
</div>

Sé que hay una forma para usar sólo una función para onmouseenter y una sola para onmouseleave, seguramente usando 'this', pero no puedo comprender cómo se hace?

1
  • ¿Que quieres conseguir exactamente?
    – Optimae
    Commented el 9 nov. 2018 a las 3:06

2 respuestas 2

1

Con el siguiente script al pasar el mouse por encima de la lista de iconos sociales ara mostrar el texto que se encuentra oculto:

  $("#social li").on('mouseenter', function() {
      $(this).find('p').css("display", "inline-block");
  }).on('mouseleave', function() {
      $(this).find('p').css("display", "none")
  });

https://jsfiddle.net/Ly9no4qw/

2
  • por favor añade una explicación a tu respuesta, solo poner un fragmento de código se considera de baja calidad
    – user75901
    Commented el 9 nov. 2018 a las 5:08
  • muchas gracias punto negativo, si es por que no he sido preciso en cuanto a redaccion y explicacion lo merece pero el codigo puede ser una posible solucion.
    – jsstoni
    Commented el 9 nov. 2018 a las 5:25
0

Puedes hacer lo mismo con CSS y mejorarías un pelín el rendimiento. Sería algo como:

#social li p{
    display: none;
}
#social li:hover p{
    display: inline-block;
}

Con esto se hace lo que con javascript pero sin tocar el DOM y puedes usar otros estilos para tal vez crear una animación en colores o tamaños.

Como observación, por sintaxis en HTML los elementos <a> no pueden contener elementos <p> usa <span> en su lugar.

Animaciones CSS

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.