圖片遮罩問題
阿新 • • 發佈：2018-11-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photos{
width: 900px;
height: 500px;
background-color: black;
}
li{
display: inline-block;
height: 200px;
width: 250px;
margin-top: 10px;
margin-left: 5px;
}
ul{
list-style-type: none;
margin-top: 5px;
}
#first1{
background-image:url('01.jpg');
background-size: cover;
background-color: rgba(120,120,120,0.5);
}
#first2{
background-image:url('02.jpg');
background-size: cover;
}
#first3{
background-image:url('03.jpg');
background-size: cover;
}
#first4{
background-image:url('04.jpg');
background-size: cover;
}
#first5{
background-image:url('05.jpg');
background-size: cover;
}
#first6{
background-image:url('06.jpg');
background-size: cover;
}
.zhezao{
height: 200px;
width: 250px;
/*background-color: rgba(120,120,120,0.5);*/
}
</style>
<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('li').mouseover(function(){
// 當滑鼠移入的時候，該元素的兄弟元素設定為遮罩
$(this).siblings().children().css("background-color","rgba(0,0,0,0.5)")
})
$('li').mouseout(function(){
// 當移出的時候，當前兄弟元素的背景顏色設定不透明
$(this).siblings().children().css("background-color","rgba(0,0,0,0)")
})
})
</script>
</head>
<body>
<div class="photos">
<ul class="">
<li id="first1"><div class="zhezao"></div></li>
<li id="first2"><div class="zhezao"></div></li>
<li id="first3"><div class="zhezao"></div></li>
<li id="first4"><div class="zhezao"></div></li>
<li id="first5"><div class="zhezao"></div></li>
<li id="first6"><div class="zhezao"></div></li>
</ul>
</div>
</body>
</html>