jquery鼠标移入移出变色和单击隐藏出现事件

最新推荐文章于 2021-07-04 13:52:37 发布

原创最新推荐文章于 2021-07-04 13:52:37 发布 · 8k 阅读

5 ·

CC 4.0 BY-SA版权

学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，并通过jQuery实现了对页面中列表项颜色的动态改变及隐藏显示功能。主要内容包括：当鼠标悬停在列表项上时将其变为红色，鼠标移开后恢复黑色；点击按钮则实现列表项的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <script src="Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //鼠标移入变红色
    $("li").mouseover(function (){
        $(this).css("color", "red");
        
    });
        //鼠标移除变黑色
    $("li").mouseout(function () {
        $(this).css("color", "black");
    });
        //单击隐藏/出现
    $("button").click(function () {
        
            $("li").toggle();
      
    });
});
</script>


</head>

<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>


    <h3>图书种类</h3>
    <ul type="circle">
        <li>计算机类</li>
        <li>教材类</li>
        <li>杂志类</li>
        <li class="my_love">文学类</li>
    </ul>
    <h3>兴趣种类</h3>
    <ol>
        <li>篮球</li>
        <li>足球</li>
        <li>羽毛球</li>
        <li class="my_love" title="sport">乒乓球</li>
    </ol>

    <button type="button">Click me</button>
</body>
</html>

This is a heading

This is a paragraph.

This is another paragraph.