jquery懸停和while循環

我有一個PHP的表，用while循環來顯示記錄。jquery懸停和while循環

我添加了一個jQuery懸停處理程序來做到這一點，如果它懸停在同一行顯示一條消息但問題是，如果懸停它顯示一條消息在所有行。

這裏是CSS：

<style> 
    .tansa{ 
    position: absolute; 
    margin-right: -60px; 
    margin-top:-25px; 
    background: #CBDFF3; border: 1px solid #4081C3; font-size: 0.88em; 
    padding: 2px 7px; display: inline-block; 
    border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; 
    line-height: 1.2em; 
    text-shadow: 0 0 0em #FFF; 
    overflow: hidden; 
    text-align: center; 
    color:black; 
    display:none; 
    } 

    .arrow{ 
    position: relative; 
    width: 0; 
    height: 0; 
    top: -25px; 
    border-top: 5px solid #000000; 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
    display:none; 
    } 
</style>

這裏是我的PHP：

<table><tr>row</tr> 
<?php 
$results = mysql_query("select * from MyTable"); 
while{$r = mysql_fetch_array($results)){ 
echo "<tr><td>Row : <img src='img/tans.png' width='24' height='24' class='tansef' /><span  class='tansa' >the message</span><div class='arrow'></div></td></tr>"; 
} 
?> 
</table>

這裏是jQuery的

$(document).ready(function(){ 
    $('.tansef').hover(function(){ 
    var sh = $('.tansa'); 
    var sharrow = $('.arrow'); 
    sh.show(); 
    sharrow.show(); 
    }, function(){ 
    var shs = $('.tansa'); 
    var sharrows = $('.arrow'); 
    shs.hide(); 
    sharrows.hide(); 
    }); 
});

任何解決方案，只顯示每行的消息？

來源

2012-09-07 DragoN

嘗試改變：

var sh = $('.tansa'); 
var sharrow = $('.arrow');

到：

var sh = $(this).siblings('.tansa'); 
var sharrow = $(this).siblings('.arrow');

（以及等效SHS和sharrows變量）。您的代碼是通過使用this來引用具有特定類的所有元素，而不是那些相對於正在懸停的元素。

jsFiddle example

來源

2012-09-07 03:42:18 j08691

THX了很多，它做工精細 – DragoN

@DragoN不要忘記點擊綠色的勾號，如果這回答了你的問題 –

jquery懸停和while循環

回答

相關問題