jquery cómo cambiar solo un elemento principal al colocar el cursor sobre el elemento

Question

Me gustaría cambiar solo uno de los elementos principales al pasar el mouse sobre las etiquetas <p>. El código es:

$('.hover').each(function() { 
    $(this).parent().hover(function() { 
      $('p').parent(this).css('font-size','30px'); 
     }, function() { 
      $('p').parent(this).css('font-size','10px'); 
    }); 
}); 

y el HTML es:

<ul> 
     <li>1 <p class='hover'>xxxx</p></li> 
     <li>2 <p class='hover'>yyyy</p></li> 
    </ul> 

Cuando se ciernen sobre "xxxx", quiero "1" y "xxxx" para cambiar, pero "2" y "aaaa" no hacer nada, y cuando coloque el cursor sobre "yyyy", quiero que "2" e "yyyy" cambien pero "1" y "xxxx" no hacen nada.

Soy nuevo en jQuery.

Answer 1

Usted podría utilizar

$('p').closest('li').css('font-size','30px'); 

Answer 2

$('p.hover').parent().hover(function() { 
    $(this).children('p').css('font-size','30px'); 
}, function() { 
    $(this).children('p').css('font-size','10px'); 
}); 

Usted no tiene que utilizar un bucle de cada uno para agregar los elementos emergentes. Si tiene múltiples elementos seleccionados, aplicará el evento en todos los elementos.

Dicho todo esto, optimicé ligeramente su código.

He agregado el control deslizante sobre el elemento primario del párrafo, tal como lo hizo. Al usar $(this) en la devolución de llamada del evento, puedo seleccionar el elemento fijo y aplicar estilos a ese elemento.

Como deseo que el tamaño de letra se aplique en el párrafo, selecciono primero el elemento deseado.

---

Resumiendo arriba hasta:

• Encontrar los elementos de los párrafos ($('p.hover'))
• conseguirlo de los padres, el elemento li (.parent())
• Aplicar el caso de la libración (.hover())

Una vez que se llama al evento hover:

• Obtener elemento actual ($(this))
• Encontrar el punto interior (.children('p'))
• Aplicar estilos

Answer 3

Padres de <p> en su caso es <li>. Necesita:

$('.hover').parent().parent().hover(
    function() { 
     $(this).css('font-size','30px'); 
    }, function() { 
     $(this).css('font-size','10px'); 
    });