鼠标悬停时仅悬停一行

发布于 2024-12-04 05:19:18 字数 3075 浏览 0 评论 0原文

请帮我解决问题:)

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');
    });
});

原文

please help me resolve the problem :)

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 script:

    $(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');
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半城柳色半声笛 2024-12-11 05:19:18

工作演示

使用$(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');
    });
});

WORKING DEMO

use $(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');
    });
});

回复收藏 0 原文

忆离笙 2024-12-11 05:19:18

首先，我很好奇为什么您立即对 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)，因此每当您将鼠标指向该行时，它都会更改其样式。它比立即使用 jQuery 更简单和方便（这只会增加页面的文件大小，这在将来会影响网站的性能）。

进一步说明：

属性 align="left" 已被弃用，避免使用它，改用 CSS (text-align: left)。
默认情况下，html 的对齐方式是 ltr （从左到右），因此您实际上不需要在 上声明它。。
您需要提供，以便用户了解 的全部内容。
您至少应该提供一个摘要来告诉屏幕阅读器其目的是什么（这是的长版本，但是更详细）嗯>。
您缺少、和。它们在 XHTML 中是必需的（如果您打算使用它的话），并且它们还有助于告诉阅读您代码的人这些所属的位置。
为什么您立即使用 jQuery（或 JavaScript 代码）？在 CSS 中这样做不是更实用吗？少即是多。
你的颜色组合不好，对比度太低。将浅色前景色与浅色背景色混合是一个非常糟糕的主意。
您应该避免在 CSS 中使用任何命名属性值，因为它们在浏览器之间往往不一致，建议的方法是使用短十六进制值。
最后但并非最不重要的。您无缘无故地放置了太多
，您想在另一个表中嵌套表来实现什么目的？在我看来，这会让你的用户界面在未来变得臃肿。

before anything else, I'm curious why you immediately bothered with JavaScript codes, in this case, using the jQuery library? You can pretty much achieve that with very few CSS codes.

Revising Your Code (With a few corrections):

The Markup:

<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>

The CSS:

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

A more practical solution:

The solution in your problem is to use the pseudo-class selector (:hover) in the <tr>, so whenever you point your mouse on that row, it will change its style. It's more easy and convenient than immediately using jQuery (which will just increase your page's file size, which in the future, will affect the performance of your site).

Further Notes:

The attribute align="left" is already deprecated, avoid using it, use CSS instead (text-align: left).
By default, the alignment of html is ltr (left-to-right), so you don't really need to declare that on the <table>.
You need to provide a <caption> so users will know what the <table> is all about.
You should at least provide a summary to tell screen readers what's its purpose (it's the long version of <caption>, but a more detailed one).
You are missing <thead>, <tbody>, and <tfoot>. They are required in XHTML (if you ever plan to use it), and they are also useful to tell people who read your code where those <tr> belong to.
Why are you immediately using jQuery (or JavaScript codes)? Isn't it more practical to do this in CSS? Less is more.
Your color combination is bad, too low in contrast. Mixing a light foreground color with a light background color is a very bad idea.
You should avoid using any named property values in CSS, because they tend to be inconsistent across browsers, the recommended approach is to use the short hexadecimal values.
Last, but not the least. You are placing too many <div>s for no reason, and what are you trying to achieve on nesting tables inside another table? That will bloat your UI in the future, in my opinion.