Creando una vista rápida con jquery

Quiero crear una vista rápida para un carrito de compras,

Problema 1: cuando coloco el mouse sobre cualquiera de los cuadros, aparece una vista rápida en todo el cuadro, ¿cómo puedo mostrarlo solo en el nodo principal?

Problema 2: cuando coloco el mouse en el enlace de vista rápida, sigue alternando.

Aqui esta mi codigo

<html>
<title>Quick view </title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.quickview{
    margin:0px;
    position:absolute;
    margin-top:18%;
    margin-left:12%;
    border:1px;
    border-color:red;
    border-style:dotted;
    display:none;
}

.box{
    margin:10px;
    height:300px;
    width:400px;
    border:2px;
    border-color:green;
    border-style:solid;
    background-color:silver;
}
</style>

<script type="text/javascript">
    $(document).ready(function(){
                $(".box").bind('mouseover',function(event){
                        $(".quickview").stop(true,true).fadeIn(100);
        });
                $(".box").bind('mouseleave', function(e) {
                        $(".quickview").stop(true,true).fadeOut(100);
        });
    });
        </script>

</script>
</head>
<body>
<div style="margin:10px;">
<table>
    <tr>
        <TD>
            <div class="quickview">
                <a href="doo.php">Quick View</a>
            </div>
            <div class="box">
                <a href="foo.php">

                </a>
            </div>
        </TD>
        <TD>
            <div class="quickview">
                <a href="doo.php">Quick View</a>
            </div>
            <div class="box">
                <a href="foo.php">

                </a>
            </div>
        </TD>
    </tr>
    <tr>
        <TD>
            <div class="quickview">
                <a href="doo.php">Quick View</a>
            </div>
            <div class="box">
                <a href="foo.php">

                </a>
            </div>
        </TD>
        <TD>
            <div class="quickview">
                <a href="doo.php">Quick View</a>
            </div>
            <div class="box">
                <a href="foo.php">

                </a>
            </div>
        </TD>
    </tr>
</table>
</div>

</body>
</html>

Gracias por adelantado

preguntado el 28 de julio de 12 a las 14:07

1 Respuestas

¿Es esto lo que quieres?

 $(".box").bind('mouseenter',function(event){
     $(this).prev(".quickview").stop(true,true).fadeIn(100);
 }).parent().bind('mouseleave', function(e) {
     $(this).find(".quickview").stop(true,true).fadeOut(100);
 });​

manifestación

Respondido 28 Jul 12, 14:07

Genial, esto es lo que estaba buscando. Gracias. - Rkumaram

@Rkumaram De nada. Si esto es correcto para ti, entonces probablemente podrías aceptar la respuesta. - Ingeniería

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.