0

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>

2 respuestas 2

0

No me ha quedado muy claro la duda, pero te intentaré oferecer una respuesta. El problema que le veo al código es que seleccionas mal la lista y por eso te hace el evento en todas las listas.

Yo he utilizado el evento hover y he hecho que al pasar sobre la primera lista coja el ancho y se traslade a las listas de abajo. En caso de necesitar otra cosa, pregunta sin miedo.

<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() {
    		
    		$( "ul:eq(0) li" ).hover(
    			
      			function() {
      				var id = $(this).index();
    				var myHeight = $(this).height();
      				$( "ul.o-list" ).each(function() {
      					$(this).find( 'li' ).eq(id).css('height' ,myHeight);
      				});
       			});
    			
    			
    	});
    
    </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>

0

Si, el tema es utilizar el hover, que lo que hace es equivalente a mouseenter y a mouseleave. Lo que quiero es que las celdas de las siguientes columnas cojan el mismo tamaño del más grande( es decir, Coffee
ss) al pasar el ratón por encima. Es decir las 3 de coffee, y que al salir el ratón del div vuelva al tamaño original y al volver a pasar se vuelva adaptar al tamaño del más grande . con el prevheight no me funciona.

<!DOCTYPE html>

Title of the document

$(document).ready(function() { var prevHeight = $('li').height(); console.log(prevHeight); $( "li" ).hover ( //var myHeight = 0; function() { var id = $(this).index(); var myHeight = $(this).height(); $( "ul.o-list" ).each(function() { $(this).find( 'li' ).eq(id).height(myHeight); }); }, function(){ $( "ul.o-list" ).each(function() { //$('li').height(prevHeight); }); }); });

The content of the document......

  • Coffee
    ss
  • Tea
  • Milk
  • Coffee
  • Tea
  • Milk
  • Coffee
  • Tea
  • Milk

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.