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

最新推荐文章于 2023-08-14 08:56:30 发布

小调调hxy

最新推荐文章于 2023-08-14 08:56:30 发布

阅读量7.9k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/u014185792/article/details/21531673

版权

学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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