<!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>
jQuery-高亮显示
最新推荐文章于 2021-11-23 19:23:28 发布