jQuery-高亮显示

最新推荐文章于 2022-11-26 10:13:46 发布

前端笨鸟

最新推荐文章于 2022-11-26 10:13:46 发布

阅读量752

点赞数

分类专栏： jQuery 文章标签： js

本文链接：https://blog.csdn.net/qq_41670147/article/details/103467475

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style-type: none;
        }
        
        body {
            background-color: #000;
        }
        
        .box {
            width: 618px;
            height: 400px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            /* Firefox */
            -webkit-box-sizing: border-box;
            margin: 60px auto 0;
            /* Safari */
        }
        
        .box li {
            float: left;
            border: 3px solid #000;
        }
        
        .box li img {
            width: 200px;
        }
    </style>
    <script src="jquery-3.4.1.min.js"></script>
</head>

<body>
    <ul class="box">
        <li><img src="cxxr.png"></li>
        <li><img src="cxxr.png"></li>
        <li><img src="cxxr.png"></li>
        <li><img src="cxxr.png"></li>
        <li><img src="cxxr.png"></li>
        <li><img src="cxxr.png"></li>
    </ul>
    <script>
        $(function() {
            $(".box li").hover(function() {
                $(this).fadeTo(100, 1).siblings("li").stop().fadeTo(100, 0.5)
            })
        })
    </script>
</body>

</html>

在这里插入图片描述

前端笨鸟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery-高亮显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫