用hover實作圖檔遮罩層的出現和消失
html部分
我在這裡建立了三個盒子，可以看出div1裡面包含div2和div3,div2和div3都是遮罩層。
遮罩層必須放在大盒子的裡面
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
</div>
css部分
我們先做div1和div2的樣式部分，除了基本的寬高、背景顔色的設定，div1的位置必須是相對定位，div2也就是遮罩層必須是絕對定位。當滑鼠移入的時候，遮罩層的透明度由0.6變成0，為了讓切換看上去平滑一點，那麼我們用了transition
.div1{
position: relative; *相對定位*
height:200px;
width:200px;
background-color: pink;
}
.div2{
position: absolute; *絕對定位*
height:200px;
width:200px;
background-color: black;
opacity: .6; *透明度*
}
.div1:hover .div2{
opacity: 0; *透明度*
transition: all .6s ease;
}
css部分
接着我們來做div1和div3的樣式部分，除了基本的寬高、背景顔色的設定，div1的位置必須是相對定位，div3也就是遮罩層必須是絕對定位。滑鼠未移入div1,div3在盒子下面，并且隐藏，當滑鼠移入的時候，div3就會進入div1，在這裡，我用底部距離實作盒子的出現和隐藏。同樣用transition實作動畫的平滑性。
.div1{
position: relative; *相對定位*
height:200px;
width:200px;
background-color: pink;
overflow: hidden; *讓多出盒子外的東西實作隐藏*
}
.div3{
position: absolute; *絕對定位*
height:50px;
width:200px;
background-color: firebrick;
bottom:-50px;
opacity: .6;
}
.div1:hover .div3{
bottom:0;
transition: all .6s ease;
}
完整代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{
padding:0;
margin:0;
}
.div1{
position: relative;
height:200px;
width:200px;
background-color: pink;
overflow: hidden;
}
.div2{
position: absolute;
height:200px;
width:200px;
background-color: black;
opacity: .6;
}
.div3{
position: absolute;
height:50px;
width:200px;
background-color: firebrick;
bottom:-50px;
opacity: .6;
}
.div1:hover .div2{
opacity: 0;
transition: all .6s ease;
}
.div1:hover .div3{
bottom:0;
transition: all .6s ease;
}
</style>
<body>
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</body>
</html>
至此，我們實作了用hover實作圖檔遮罩層的出現和消失。
![js寫實時指針鐘表加hover數字提示[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)