这段代码展示了一个使用HTML、CSS和jQuery创建的图片列表。当鼠标悬停在<ul>元素的某个<li>子元素上时，当前图片的透明度变为1，而其他图片的透明度变为0.5。当鼠标离开<ul>元素时，所有图片的透明度恢复到1。这实现了简单的交互式图片高亮效果。
1.先写它的body
<body>
<ul>
<li><img src="./img/13_reading_4k.jpg" alt=""></li>
<li><img src="./img/21_reflection_4k.jpg" alt=""></li>
<li><img src="./img/26_reading_4k.jpg" alt=""></li>
<li><img src="./img/26_stairs1_4k.jpg" alt=""></li>
<li><img src="./img/36_white_4k.jpg" alt=""></li>
<li><img src="./img/4_makeup_4k.jpg" alt=""></li>
</ul>
</body>
2.写它的样式
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
}
ul{
margin: 100px auto;
width: 1400px;
}
li{
list-style: none;
}
img{
width: 420px;
height: 240px;
float: left;
padding: 10px 10px 0 0;
/* border: 5px solid #ccc; */
}
</style>
3.引入jQuery
<script src="./jQuery/jquery-1.12.2.js"></script>
4.写入逻辑判断
这里的逻辑是鼠标移入li标签时将这个li标签的透明度设置为1，将其他的li标签设置为0.5.
当鼠标移出ul标签时将所有li标签的透明度设置为1。
<script>
$("li").mouseenter(function(){
console.log(this)
$(this).css("opacity",1).siblings().css("opacity",0.5)
})
$("ul").mouseleave(function(){
$("li").css("opacity",1)
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
