Skip to main content
se añadieron 250 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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.

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.

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.

se añadieron 21 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38
$(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>
$(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;
}

#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>
$(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>
se añadieron 22 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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.

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();
    alert$('Has'#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;
}

#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>

No te hace falta usar Javascript. Con el uso de la pseudo-clase :hover de CSS puedes hacerlo.

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

});
* {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;
}

#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>

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.

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;
}

#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>
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38
Loading