Quiero hacer que al pasar el ratón por encima de la página el espacio de la celda li de la primera columna se meta en la misma celda de las dos siguientes columnas. El código que estoy trasteando es el siguiente.
Probé con hover, mouseneter y 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>