problema
Describo mi problema: 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
El código que estoy trasteando es el siguiente. Probando
Probé con hover, mouseneter y mouseleave.
<!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>
<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>
Gracias