效果如图:
代码详情如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.sty {
width: 600px;
height: 380px;
background-color: black;
float:right;
}
.one {
width: 40px;
height: 200px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: -40px;
z-index: 2;
background-color: #34f0ff;
}
.content {
display: flex;
align-items: center;
}
</style>
<script>
function fun1() {
var p = document.getElementById('idname');
p.style.opacity = 1;
}
function fun2() {
var p = document.getElementById('idname');
p.style.opacity = 0;
}
</script>
<body>
<div class="content" onmouseover="fun1()" onmouseout="fun2()">
<video class="sty" src="1.mp4" controls autoplay></video>
<div id="idname" class="one">
<div ><img src="fenxiang.png" alt="分享"></div>
<div ><img src="huazhixianxing.png" alt="画质"></div>
<div><img src="suoping.png" alt="锁屏"></div>
<div><img src="zan.png" alt="点赞"></div>
</div>
</div>
</body>
</html>