我想向HTML视频添加一个动态播放按钮,当鼠标悬停在视频上时,该按钮会改变颜色,如下所示:
,并在视频开始播放后消失。
有什么主意我可以设置吗?
答案 0 :(得分:1)
使用:hover
css属性:
.container{margin:50px;}
.fa-youtube-play{transform: scale(5);color:black;opacity:0.7;}
.fa-youtube-play:hover{transform: scale(5);color:dodgerblue;}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<i class="fa fa-youtube-play"></i>
</div>
...并使它在单击时消失...
$('.fa-youtube-play').click(function(){
$(this).hide();
});
.container{margin:50px;}
.fa-youtube-play{transform: scale(5);color:black;opacity:0.7;}
.fa-youtube-play:hover{transform: scale(5);color:dodgerblue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<i class="fa fa-youtube-play"></i>
</div>