創建快速查看使用jQuery

問題1：當我把我的鼠標在任何的箱子，快速查看出現在所有的箱子，我怎麼能只在顯示它父節點。

問題2：當我將鼠標放在快速查看鏈接上時，它會一直處於切換狀態。

這裏是我的代碼

<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>

Thanx提前

來源

2012-07-28 Rkumaram

這是你想要的嗎？

$(".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); 
});

demo

來源

2012-07-28 13:10:55 Engineer

太好了，這就是我一直在尋找。謝謝你。 – Rkumaram 2012-07-28 13:33:08

@Rkumaram不客氣，如果這對你是正確的，那麼你可能會[接受]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work ）答案。 – Engineer 2012-07-28 13:34:25

對不起，我是這個論壇的新手，現在就接受它。 – Rkumaram 2012-07-28 13:41:20

創建快速查看使用jQuery

回答

相關問題