源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video元素</title>
<style type="text/css">
ul{
list-style: none;
margin: 0px;
padding: 0px;
cursor:pointer;
}
li{
margin-bottom: 5px;
cursor:pointer;
background-color:rgb(135,215,231);
font-size:5px;
margin:0;
}
img{
width: 30px;
height: 30px;
}
.two{
position: absolute;
padding-left: 460px;
text-align: center;
padding-top: 140px;
opacity: 0;
transition:all 0.05s linear 1s;
-webkit-transition:all 2s;
cursor:pointer;
}
.one:hover .two{
opacity: 1;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<ul>
<li><img src="分享.png" alt=""></li>
<li>分享</li>
<li><img src="画质.png" alt=""></li>
<li>画质</li>
<li><img src="锁屏.png" alt=""></li>
<li>锁屏</li>
<li><img src="赞赏.png" alt=""></li>
<li>赞赏</li>
</ul>
</div>
<div onmouseover="fun1()" onmouseout="fun2()">
<video width="500" height="450" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持Video标签。
</video>
</div>
</div>
<script>
function fun1() {
var p = document.getElementById('display');
p.style.opacity = 1;
}
function fun2() {
var p = document.getElementById('display');
p.style.opacity = 0;
}
</script>
</body>
</html>
实现效果：
鼠标移动到图片右边的标题上，图片会进行切换，并且标题字体放大。
9024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
