0

レコードを表示するためのwhileループを含むphpのテーブルがあります。

これを行うために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();
  });
});

各行にのみメッセージを表示するための解決策はありますか？

4

1 に答える 1

2

変更してみてください:

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

に：

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

(および同等の shs および sharrows 変数)。コードは、 を使用してホバーされている要素に関連する要素ではなく、特定のクラスを持つすべての要素を参照していthisます。

jsFiddle の例

于 2012-09-07T03:42:18.987 に答える