Skip to main content
Add tags and add snippet
Origen Enlace
Marc
  • 5.2k
  • 7
  • 20
  • 36

problema

Gracias

problema

Gracias

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

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 código que estoy trasteando es el siguiente. Probando 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>

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 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>

Gracias

Describo mi problema: Quiero hacer que al pasar el ratón por enciamdeencima 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. Probando con hover, mouseneter y mouseleave.

Title of the document$(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});});});The content of the document......Coffee

SDSS Tea
  • Milk

    sdsd
  • Coffee
  • Tea
  • Milk
  • lol
  • Coffee
  • Tea
  • Milk
  •  <!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>
    

    Describo mi problema: Quiero hacer que al pasar el ratón por enciamde 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. Probando con hover mouseneter y mouseleave.

    Title of the document$(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});});});The content of the document......Coffee

    SDSS Tea
  • Milk

    sdsd
  • Coffee
  • Tea
  • Milk
  • lol
  • Coffee
  • Tea
  • Milk
  • 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 código que estoy trasteando es el siguiente. Probando 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>
    
    Origen Enlace
    Loading