I want to make that when moving the mouse over the page the space of the cell li of the first column is put in the same cell of the next two columns. The code that I am trickling is the following.
I tried hover, mouseneter and mouseleave.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "li" ).hover(
function() {
var id = $(this).index();
var myHeight = $(this).height();
$( "ul.o-list" ).each(function() {
$(this).find( 'li' ).eq(id).height(myHeight);
});
});
$( "li" ).mouseenter(
function(){
var id = $(this).index();
var myHeight = $(this).height();
/*$("ul.pp").mouseenter(function(){
$(".pp span").text (x += 1 );
});*/
$( "ul.o-list" ).each(function() {
$(this).find( 'li' ).eq(id).height(myHeight)//.css({'background-color': 'blue', 'color': 'red'});
});
});
$( "li" ).mouseleave(
function() {
var id = $(this).index();
var myHeight = $(this).height();
$( "ul.o-list" ).each(function() {
$(this).find( 'li' ).eq(id).height(30)//la idea es que se quede el height del li original
});
});
});
</script>
</head>
<body>
The content of the document......
</body>
<div>
<ul class="o-list">
<li ><span>Coffee <br><br>SDSS</span></li>
<li id="">Tea</li>
<li>Milk<br><br>sdsd</li>
</ul>
<ul class="o-list">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul class="pp">
<li> lol<span> </span></li>
</ul>
<ul class="o-list">
<li><span>Coffee</span></li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</html>