Question

我是jquery的问候者并且有一个简单的问题.. 我想从数据库中制作帖子列表..当我将鼠标悬停在其显示隐藏文字的标题上时.. 与freelancers.com上的示例相同

这是我的代码..

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="jquery.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        $("tr").mouseover(function(){
            $(".neparan").show(); 
        }); 
        $(".neparan").mouseleave(function(){ 
            $(".neparan").hide(); 
        }); 
    }); 
 </script>
</head>
<body>
<table border="1">
    <?php 
    $host = "localhost";
    $user = "root";
    $lozinka = "";
    $baza = "jquery";
    mysql_connect($host, $user, $lozinka);
    mysql_select_db($baza);
    $upit = mysql_query("SELECT * FROM tekst");
    while ($red = mysql_fetch_array($upit)) { ?>
        <tr class="naslov">
            <td>
                <?php echo $red["naslov"]; ?>
            </td>
        </tr>
        <tr class="neparan">
            <td>
                        <?php echo $red["tekst"]; ?>
            </td>
            <td>
                            <?php echo $red["naslov"]; ?>
        </tr>
                            <?php echo "</br>";

                   } ?>
 </tr>
</table>
</body>
</html>

和css文件..

.neparan {display:none;}

.naslov {color:red;}

问题是，当我将鼠标悬停在tr上时，所有td都显示...

Answer 1

当鼠标悬停在一个t上时，您将显示所有neparan课程：$(".neparan").show();

更改代码：

$("tr").mouseover(function(){ $(".neparan").show(); }); // 
$(".neparan").mouseleave(function(){ $(".neparan").hide(); });

要：

$("tr").mouseover(function(){ $(".neparan", this).show(); });
$(".neparan").mouseleave(function(){ $(this).hide(); });

我使用了context参数：

jQuery（selector [，context]）
   selector包含选择器的字符串   表达
  context-要用作上下文的DOM元素，文档或jQuery

Answer 2

使用find（）方法很可能有助于您更好地理解搜索元素的上下文

http://api.jquery.com/find/

$(document).ready(function() {
    $("tr").mouseover(function() {

        /* "this" refers to row being hovered*/                    
        $(this).find(".neparan").show(); 
    });
    $(".neparan").mouseleave(function() { 
        $(this).find(".neparan").hide(); 
    }); 
});

Jquery mouseenter mouseleave

2 个答案: