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!