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>