¿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"
$(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>