[SOLUCIONADO] Mostrar/ocultar div al hacer un hover

[madman_18]

Buenas tardes!
[Edito: Creo que esto habría que moverlo a la categoría jQuery...perdón por el error :D]

Quería comentaros una cosa que no consigo realizar

Tengo la siguiente estructura:

Código HTML:

div class="tarjeta-producto" id="tarjeta-producto">
                <ul>
                    <li>
                        <div class='contenido-tarjetaProducto'>
                            <div class='imagen-tarjetaProducto'>
                                <div class="capaoculta" style="width:100%;height:150px;background:yellow;position:relative;top:88px;display:none;">
                                    holaaa!
                                </div>
                            </div>
                            <div class='texto-describeProducto'>
                                <p>Informacion</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class='contenido-tarjetaProducto'>
                            <div class='imagen-tarjetaProducto'>
                                <div class="capaoculta" style="width:100%;height:150px;background:yellow;position:relative;top:88px;display:none;">
                                    holaaa!
                                </div>
                            </div>
                            <div class='texto-describeProducto'>
                                <p>Informacion</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
 

Ahora lo que debe hacer es que, cuando pasen con el ratón por encima muestre lo que sería su "capaoculta", el problema está en que cuando lo hago me lo hace en todos (si hago el hover por el primer "li" me muestra su capaoculta y el del siguiente elemento "li")

La cosa está en que he probado en jQuery usar el .each, .find...y siempre obtengo el mismo resultado. Os paso el que tengo actualmente:

Código Javascript:

$(document).ready(function(){
        $('#tarjeta-producto ul li').hover(function(){
            if($(this).find('div.capaoculta').length){
                $('div.capaoculta').toggle('fast');
            }           
        },function(){
            if($(this).find('div.capaoculta').length){
                $('div.capaoculta').toggle('fast');
            }
        });
            
    });
 

¿Qué es lo que estoy haciendo mal al buscar el div.capaoculta? En teoría, con el $(this) de la línea if($(this).find('div.capaoculta').length) me sacaría únicamente del elemento en el que estoy haciendo el hover ¿no?

Gracias por la ayuda!

[PHPeros]

Falla la condicional... Para qué usas length?

[madman_18]

Iniciado por PHPeros

Falla la condicional... Para qué usas length?

Si te digo la verdad PHPeros, ha sido un código que había encontrado por google que decía servir para lo mismo que estoy necesitando (mi anterior código tampoco funcionaba...).

La cosa está en que: no puedo cambiar el estilo de la clase al hacer "hover" porque entonces me lo hace en todos los bloques de dicha clase.

Tampoco puedo usar "id" ya que es contenido que genero dinámicamente y puede que haya 1,3,6,7 elementos (tendría que estar asociando por cada bloque un código de javascript)

Entonces no se me ocurre cómo podría realizarlo

[pzin]

¿No sería más fácil hacerlo en CSS?

Código CSS:

.capaoculta {
  display: none;
}
 
#tarjeta-producto li:hover .capaoculta {
  display: block;
}
 

Y si quieres animarlo puedes usar transition. Ya le meten JavaScript a todo.

[madman_18]

Iniciado por pzin

¿No sería más fácil hacerlo en CSS?

Código CSS:

.capaoculta {
  display: none;
}
 
#tarjeta-producto li:hover .capaoculta {
  display: block;
}
 

Y si quieres animarlo puedes usar transition. Ya le meten JavaScript a todo.

pzin sé que se puede hacer con css3 el ocultarlo y meter el efecto, la razón de que no lo use: es por el control de ciertas variables que estoy gestionando las cuales varían de valores según quiera el usuario (según active una opción o no de la página web) y gestiono la capa con su contenido según el valor y su comportamiento de la capa.

De ahí que me sea demasiado "genérico" el uso de css ya que necesito realizar más acciones. :D :D :D

[PHPeros]

No me he enterado de nada... Añade códigos.

[utan]

Me párese a mi que necesitas hacer delagation en jQuery ,

Código:

$(document).ready(function(){
	var eltoDelegate = $('#tarjeta-producto');
	
    if(eltoDelegate){
		eltoDelegate.delegate( 'div.contenido-tarjetaProducto'  ,  'hover' , function(){
			if( $(this).find('div.capaoculta') ){
				$(this).find('div.capaoculta').toggle('fast');
			}
		});
	}
	
});

Lo que ase es monitoriar el div id #tarjeta-producto por alguna class llamada div.contenido-tarjetaProducto agregandole el evento hove, de allí encuentras tu class escondida..

[madman_18]

Gracias a todos por las guías, ya lo he conseguido solucionar :) :D era un fallo en la estructura de mi HTML y ya conseguí que funcionase :) :)