0

Como puedo indicarle el div sobre el que se encuentra el mouse, antes de realizar el hover, quiero decir, si no le indicio la clase que es la misma para todos no funciona, pero si le indico el id especifico si funciona, el problema, es que no son 4 divs, sino unos cuantos, como puedo decirle estoy sobre este div el 3, ahora ejecuta la función hover.

Tal y como lo tengo ahora solo esta funcionando con el primero.

$(document).ready(function(){    
    $("#1").hover(function(){
    	pe = "#"+ $("div").attr("id").valueOf();
        $(pe).css("background-color", "yellow");
        $(pe + " a").css("color", "green");
        $(pe + " a").css("text-decoration", "none");
    }, function(){
    	pe = "#"+ $("div").attr("id").valueOf();
    	 $(pe).css("background-color", "pink");
        $(pe + " a").css("color", "white");
        $(pe + " a").css("text-decoration", "none");
    });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="1" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="2" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="3" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="4" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

</body>
</html>

2 respuestas 2

3

Puedes hacer referencia al elemento que ha generado el evento a través de this.

Con $(this) obtienes el objeto jQuery que hace referencia al elemento (en este caso el div).

De esta forma puedes asociar el controlador de evento a partir del nombre de la clase.

$(document).ready(function(){    
    $(".pepito").hover(function(){
        var $div = $(this);
        var $link = $div.find('a');
        $div.css("background-color", "yellow");
        $link.css("color", "green");
        $link.css("text-decoration", "none");
    }, function(){
        var $div = $(this);
        var $link = $div.find('a');
    	  $div.css("background-color", "pink");
        $link.css("color", "white");
        $link.css("text-decoration", "none");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="2" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="3" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

<div id="4" class="pepito" style="background-color:pink">
<a href="#" style="text-decoration:none; color:white;">Hover the mouse pointer over this paragraph.</a></div>

PD: Supongo que lo querrás para hacer algo más complejo ¿no?, porque esto lo puedes hacer utilizando sólo css.

1
  • Tenías razón no había caído en la herencia en CSS y no me tengo que romper la cabeza con jQuery, pero también esta muy bien la explicación de arriba que puedo utilizar el this, para poder localizar el selector en cuestión. Gracias el 13 feb. 2018 a las 12:29
1

Yo te recomendaria que en tema de :hover emplees CSS , a continuación hay un ejemplo sencillo

.Clase{
  height: 30px;
  width: 100%;
  background-color: yellow;
  margin: 10px;
  
  cursor: pointer;
}

.Clase:hover{  /* Cuando estemos encima de un div, cambia a color rojo*/
  background-color: red;
}
<div class="Clase">Texto prueba 1</div>
<div class="Clase">Texto prueba 2</div>
<div class="Clase">Texto prueba 3</div>
<div class="Clase">Texto prueba 4</div>

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.