修改您的代码（进行一些更正）：

Question

请帮我解决问题：）

HTML：

<body>
    <div>
        <header></header>
        <nav>
            <table align="left" border="1">
                <tr>
                    <td>
                    <div class="mainmenu">
                        aaa
                    </div></td>
                </tr>
                <tr class="b">
                    <td>
                    <table align="left" border="1" class="submenu">
                        <tr>
                            <td>
                            <p class="1">
                                aaaaa
                            </p></td>
                        </tr>
                        <tr>
                            <td>
                            <p class="1">
                                bbbbbbb
                            </p></td>
                        </tr>
                        <tr>
                            <td>
                            <p class="1">
                                ccccccccccccccccccccc
                            </p></td>
                        </tr>
                        <tr>
                            <td>
                            <p class="1">
                                ddddd
                            </p></td>
                        </tr>
                    </table></td>
                </tr>
                <tr>
                    <td>
                    <div class="menu">
                        bbbbbbb
                    </div></td>
                </tr>
                <tr>
                    <td>
                    <div class="menu">
                        ccccccccccccccccccccc
                    </div></td>
                </tr>
                <tr>
                    <td>
                    <div class="menu">
                        ddddd
                    </div></td>
                </tr>
            </table>

CSS：`

    body {
    background-color: orange;
    color: white;
}

main{
    color: blue;
    width: 80%;
}

table.submenu{
    background-color: #FF0033;

}

Jquery脚本：

    $(document).ready(function() {
    $('tr.b').hide();
    $('div.mainmenu').click(function() {
        $('tr.b').toggle(400);
        return false;
    });
    $('div.mainmenu, .menu').hover(function() {
        $('div.mainmenu, .menu').css('color', 'pink');
    }, function() {
        $('div.mainmenu, .menu').css('color', 'white');
    });
});

$(document).ready(function() {
    $('tr.b').mouseover(function() {
        $('p.1').css('color', 'blue');
    });
    $('tr.b').mouseout(function() {
        $('p.1').css('color', 'gray');
    });
});

Answer 1

WORKING DEMO

使用$(this)

$(document).ready(function() {
    $('tr.b').hide();
    $('div.mainmenu').click(function() {
        $('tr.b').toggle(400);
        return false;
    });
    $('div.mainmenu, .menu').hover(function() {
        $(this).css('color', 'pink');
    }, function() {
        $(this).css('color', 'white');
    });
});

$(document).ready(function() {
    $('p.1').mouseover(function() {
        $(this).css('color', 'blue');
    });
    $('p.1').mouseout(function() {
        $(this).css('color', 'gray');
    });
});

Answer 2

在其他任何事情之前，我很好奇为什么你立即使用JavaScript代码，在这种情况下，使用jQuery库？使用极少的 CSS代码，您几乎可以实现这一目标。

修改您的代码（进行一些更正）：

标记：

<table summary="a brief description of this table" border="1">
    <caption>Title of this table</caption>
    <thead>
        <tr>
            <th>Column Heading</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Table Footer</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </tbody>
</table>

CSS：

body {
    background: #FA0;
    color: #FFF;
}
table {
    border-collapse: collapse;
}
tr:hover {
    background: #F03;
}

更实用的解决方案：

问题的解决方案是在:hover中使用伪类选择器（<tr>），因此每当您将鼠标指向该行时，它都会改变其样式。它比立即使用jQuery 更容易和方便（这将增加页面的文件大小，将来会影响您网站的性能）。

进一步说明：

属性align="left"已弃用，请勿使用，请改用CSS（text-align: left）。
默认情况下，html的对齐方式为ltr （从左到右），因此您无需在<table>上声明该对齐方式。
您需要提供<caption>，以便用户了解<table>的全部内容。
您至少应该提供summary告诉屏幕阅读器它的用途是什么（它是<caption>的长版本，但是更详细的版本）。
您遗失了<thead>，<tbody>和<tfoot>。它们在XHTML 中是必需的（如果您打算使用它），它们也可以告诉那些读取您<tr>所属代码的人。
为什么要立即使用jQuery （或JavaScript代码）？在CSS中执行此操作不是更实际吗？少即是多。
你的色彩组合不好，对比度太低。将浅色前景色与浅色背景色混合是一种非常糟糕的想法。
您应该避免在CSS中使用任何命名属性值，因为它们在浏览器中往往不一致，建议的方法是使用短十六进制值。
最后，但并非最不重要。您无缘无故地放置了太多<div>，并且您想要在另一个表中的嵌套表上实现什么？在我看来，这将在未来膨胀您的用户界面。

鼠标悬停时只悬停一行

2 个答案:

WORKING DEMO

修改您的代码（进行一些更正）：

标记：

CSS：

更实用的解决方案：

进一步说明：