0

我有一个 sql 查询，它使用 while 循环来显示表中的所有行。每行生成两个 div。一个用于行 ID，另一个用于行名称。当您将鼠标悬停在具有名称的 div 上时，我希望显示具有行 id 的 div。

除了选择器之外，我一切正常。我目前只使用简单的类，但显然将鼠标悬停在任何名称上会显示所有 id div，而不仅仅是悬停在名称上的 id。

如果有人能解释什么是达到这种效果的最佳方法，我将不胜感激。

PHP

$result = mysqli_query($con,"SELECT * FROM table ORDER BY id DESC");

    while($row = mysqli_fetch_array($result))
      {

    echo "<div class='id' class='hidden'>" . $row['id'] . "</div><div class='name'>" . $row['name'] . "</div>";

      }

jQuery

$(document).ready(function() {
   $(".blue").mouseenter(function() {
       $(".red").removeClass("hidden");
   });
   $(".blue").mouseleave(function() {
       $(".red").addClass("hidden");
   });
   $(".red").mouseenter(function() {
       $(".red").removeClass("hidden");
   });
   $(".red").mouseleave(function() {
       $(".red").addClass("hidden");
   });
 });

CSS

.hidden {
 display: none;
}
4

2 回答 2

0

PHP

$result = mysqli_query($con,"SELECT * FROM table ORDER BY id DESC");

while($row = mysqli_fetch_array($result))
{
   echo "<div class='order'><div class='id' class='hidden'>" . $row['id'] . "</div><div class='name'>" .       $row['name'] . "</div></div>";

}

jQuery

$(".order").on("mouseenter",function(e){
  $(e.target).find('div.id').show();
});
$(".order").on("mouseleave",function(e){
  $(e.target).find('div.id').hide();
});
于 2013-07-08T11:43:14.460 回答
0

样本结构：

<div class='container'>
   <div class='div_id' style='display:none;'>id</div>
   <div class='div_name'>name</div>
</div>
<div class='container'>
   <div class='div_id' style='display:none;'>id</div>
   <div class='div_name'>name</div>
</div>

查询

$(".div_name").on("mouseenter",function(e){
    $(this).closest('.container').find('.div_id').show();
}).on("mouseleave",function(e){
    $(this).closest('.container').find('.div_id').hide();
});
于 2013-07-08T11:25:50.287 回答