Question

我有这张桌子：

<table>
    <tr class="row">
        <td>Title
            <div class="action">hello</div>
        </td>    
        <td>Rorow</td>
    </tr>
    <tr class="row">
        <td>Title
            <div class="action">hello</div>
        </td>  
        <td>Rorow</td>
    </tr>
</table>

当我将鼠标悬停在行上时，我想让孩子消失。所以我做了这个，但它也选择了所有其他动作：

$(".row").hover(
        function () {
            $(".action").css("visibility","hidden");
        },
        function () {
            $(".action").css("visibility","visible");
        }
    );

我错过了什么吗？

Answer 1

现在，当你将鼠标悬停在一行上时，你告诉每个带有“action”类的元素都会消失。相反，您可以使用this来引用光标经过的行，然后找到它的子“action”元素并将其隐藏。

$(".row").hover(
    function () {
        $(this).find(".action").hide();
    },
    function () {
        $(this).find(".action").show();
    }
);

Answer 2

只需使用.row：

在$(this)父元素中查找该类

$(".row").hover(
    function () {
        //$(this) refers to the row that received the hover event
        $(this).find(".action").hide();
    },
    function () {
        $(this).find(".action").show();
    }
);

这是a working jsFiddle。

Answer 3

您也可以在纯CSS中执行此操作。

tr.row .action {
    display:block;
}

tr.row:hover .action {
    display:none;
}

jQuery选择器的问题

3 个答案: