0

¿Como puedo hacer con JQuery para que al pasar el ratón por encima de las casillas (li) se muestren en rojo una a una y no todas a la vez? Al salir, ha de quitarse el color. En esto no hay problema, pongo captura de lo que hace al pasar el ratón por encima. Tampoco entiendo como hacer, si pulso una casilla, en el div con id=”info” (por ejemplo en la primera casilla) que aparezca el texto:

"Has hecho click en la casilla 1-1"

introducir la descripción de la imagen aquí

 $(document).ready(function(){
  $("#div1").mouseover(function() {
    $("#div1 ul li").css("backgroundColor", "red");
    $("#div1 ul li").css("color", "white");
  });	

  $("#div1").mouseleave(function() {
    $("#div1 ul li").css("backgroundColor", "white");
    $("#div1 ul li").css("color", "black");
  });

  $("#info").click(function(){
    /*$("#div1 ul li").*/
  });

});
* {padding:0;margin:0;}#div1{margin:1em;}#div1 ul{list-style-type: none;}
#div1 li{width:10%;float:left;}
#div1 li p {
  text-align:center;
  padding:.5em;
  border:1px solid #555;
}

#info{
  text-align:center; 
  font-size: 2em;
  padding:1em;clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<ul>
  <li><p>1-1</p></li>
  <li><p>1-2</p></li>
  <li><p>1-3</p></li>
  <li><p>1-4</p></li>
  <li><p>1-5</p></li>
  <li><p>1-6</p></li><li>
  <p>1-7</p></li><li>
  <p>1-8</p></li>
  <li><p>1-9</p></li>
  <li><p>1-10</p></li>
  <li><p>2-1</p></li><li>
  <p>2-2</p></li>
  <li><p>2-3</p></li>
  <li><p>2-4</p></li>
  <li><p>2-5</p></li>
  <li><p>2-6</p></li>
  <li><p>2-7</p></li>
  <li><p>2-8</p></li>
  <li><p>2-9</p></li>
  <li><p>2-10</p></li>
  <li><p>3-1</p></li>
  <li><p>3-2</p></li>
  <li><p>3-3</p></li>
  <li><p>3-4</p></li>
  <li><p>3-5</p></li>
  <li><p>3-6</p></li>
  <li><p>3-7</p></li>
  <li><p>3-8</p></li>
  <li><p>3-9</p></li>
  <li><p>3-10</p></li>
  <li><p>4-1</p></li>
  <li><p>4-2</p></li>
  <li><p>4-3</p></li>
  <li><p>4-4</p></li>
  <li><p>4-5</p></li>
  <li><p>4-6</p></li>
  <li><p>4-7</p></li>
  <li><p>4-8</p></li>
  <li><p>4-9</p></li>
  <li><p>4-10</p></li>
  <li><p>5-1</p></li>
  <li><p>5-2</p></li>
  <li><p>5-3</p></li><li><p>5-4</p></li><li><p>5-5</p></li>
  <li><p>5-6</p></li><li><p>5-7</p></li><li><p>5-8</p></li><li><p>5-9</p></li><li><p>5-10</p></li>
</ul>
</div>

<div id="info"></div>

2 respuestas 2

4

Realmente, lo que tienes que haces es asignar los eventos a los li y no al div que los contiene, luego de esto podrás acceder a todas las propiedades del li al cual se le dio clic usando this dentro del selector, así:

$(document).ready(function(){
  $("#div1 ul li").mouseover(function() {
    $(this).css("backgroundColor", "red");
    $(this).css("color", "white");
  });	

  $("#div1 ul li").mouseleave(function() {
    $(this).css("backgroundColor", "white");
    $(this).css("color", "black");
  });

  $("#div1 ul li").click(function(){
    var texto = $(this).text();
    
    console.log('Ha hecho clic en la casilla ' + texto);
  });

});
* {padding:0;margin:0;}#div1{margin:1em;}#div1 ul{list-style-type: none;}
#div1 li{width:10%;float:left;}
#div1 li p {
  text-align:center;
  padding:.5em;
  border:1px solid #555;
}

#info{
  text-align:center; 
  font-size: 2em;
  padding:1em;clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<ul>
  <li><p>1-1</p></li>
  <li><p>1-2</p></li>
  <li><p>1-3</p></li>
  <li><p>1-4</p></li>
  <li><p>1-5</p></li>
  <li><p>1-6</p></li><li>
  <p>1-7</p></li><li>
  <p>1-8</p></li>
  <li><p>1-9</p></li>
  <li><p>1-10</p></li>
  <li><p>2-1</p></li><li>
  <p>2-2</p></li>
  <li><p>2-3</p></li>
  <li><p>2-4</p></li>
  <li><p>2-5</p></li>
  <li><p>2-6</p></li>
  <li><p>2-7</p></li>
  <li><p>2-8</p></li>
  <li><p>2-9</p></li>
  <li><p>2-10</p></li>
  <li><p>3-1</p></li>
  <li><p>3-2</p></li>
  <li><p>3-3</p></li>
  <li><p>3-4</p></li>
  <li><p>3-5</p></li>
  <li><p>3-6</p></li>
  <li><p>3-7</p></li>
  <li><p>3-8</p></li>
  <li><p>3-9</p></li>
  <li><p>3-10</p></li>
  <li><p>4-1</p></li>
  <li><p>4-2</p></li>
  <li><p>4-3</p></li>
  <li><p>4-4</p></li>
  <li><p>4-5</p></li>
  <li><p>4-6</p></li>
  <li><p>4-7</p></li>
  <li><p>4-8</p></li>
  <li><p>4-9</p></li>
  <li><p>4-10</p></li>
  <li><p>5-1</p></li>
  <li><p>5-2</p></li>
  <li><p>5-3</p></li><li><p>5-4</p></li><li><p>5-5</p></li>
  <li><p>5-6</p></li><li><p>5-7</p></li><li><p>5-8</p></li><li><p>5-9</p></li><li><p>5-10</p></li>
</ul>
</div>

<div id="info"></div>

3

No te hace falta usar Javascript para colorear la celda por la que pasas el ratón. Con el uso de la pseudo-clase :hover de CSS puedes hacerlo. Lo bueno de hacerselo por CSS es que él solito se ocupa de detectar cuando entra y sale el ratón y de volver a su estado original. Te ahorras el programar un mouseenter y un mouseleave y además manejas los estilos desde CSS directamente.

En cuanto al tema de informar de la celda que se ha seleccionado debes hacer el uso del this, que en el caso de los eventos, hace referencia al elemento del DOM que disparó el evento.

Para ello, enlacé un evento onclick a los <li> de tu HTML que pertenezcan al div div1 y gracias al this recuperar el contenido del <p> hijo del <li> al que se la ha hecho click.

$(document).ready(function(){
  $("#div1 li").click(function(){
    var celda = $(this).find('p').text();
    $('#info').html('<p>Has pulsado la celda ' + celda + '</p>');
  });

});
* {padding:0;margin:0;}#div1{margin:1em;}#div1 ul{list-style-type: none;}
#div1 li{width:10%;float:left;}

#div1 li:hover {
  background-color: red;
  color: white;
}

#div1 li p {
  text-align:center;
  padding:.5em;
  border:1px solid #555;
}

#info{
  text-align:center; 
  font-size: 2em;
  padding:1em;clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<ul>
  <li><p>1-1</p></li>
  <li><p>1-2</p></li>
  <li><p>1-3</p></li>
  <li><p>1-4</p></li>
  <li><p>1-5</p></li>
  <li><p>1-6</p></li><li>
  <p>1-7</p></li><li>
  <p>1-8</p></li>
  <li><p>1-9</p></li>
  <li><p>1-10</p></li>
  <li><p>2-1</p></li><li>
  <p>2-2</p></li>
  <li><p>2-3</p></li>
  <li><p>2-4</p></li>
  <li><p>2-5</p></li>
  <li><p>2-6</p></li>
  <li><p>2-7</p></li>
  <li><p>2-8</p></li>
  <li><p>2-9</p></li>
  <li><p>2-10</p></li>
  <li><p>3-1</p></li>
  <li><p>3-2</p></li>
  <li><p>3-3</p></li>
  <li><p>3-4</p></li>
  <li><p>3-5</p></li>
  <li><p>3-6</p></li>
  <li><p>3-7</p></li>
  <li><p>3-8</p></li>
  <li><p>3-9</p></li>
  <li><p>3-10</p></li>
  <li><p>4-1</p></li>
  <li><p>4-2</p></li>
  <li><p>4-3</p></li>
  <li><p>4-4</p></li>
  <li><p>4-5</p></li>
  <li><p>4-6</p></li>
  <li><p>4-7</p></li>
  <li><p>4-8</p></li>
  <li><p>4-9</p></li>
  <li><p>4-10</p></li>
  <li><p>5-1</p></li>
  <li><p>5-2</p></li>
  <li><p>5-3</p></li><li><p>5-4</p></li><li><p>5-5</p></li>
  <li><p>5-6</p></li><li><p>5-7</p></li><li><p>5-8</p></li><li><p>5-9</p></li><li><p>5-10</p></li>
</ul>
</div>

<div id="info"></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.