点击一个div显示或者隐藏一个div(视频video)

首先看到两个div之间的关系,选择合适的方式:

控制div:hover关系 被控制div{
css样式修饰
}
1. 空格分隔——控制子元素 
2.  +分隔——同级元素(兄弟元素)
3.   ~分隔——控制就近元素

下面的列子是一个div里面放了video和一个div,当鼠标经过父div显示子div。

<html>
    <head>
        <meta name="viewport" content="user-scalable=yes;width=device-width;initial-scale=1.0;maximum-scale=1.0;">
        <title>视频制作</title>
        <style>
            .box{
                width: 840px;
                height: 500px;
                display: flex;
                margin: auto;
            }
            video{
                width: 800px;
                height: 500px;
            }

            .box1{
                width: 30px;
                height:400px;
                background-color: rgba(187, 187, 187,0.5);
                display: none;
                float:right;
                position: relative;
                right: 40px;
                top:50px;

            }
            img{
                width: 30px;
                height: 30px;
            }
            .box:hover .box1{
                width: 40px;
                height: 330px;
                display: block;  
                opacity: 1;
           }
        </style>
    </head>
    <body>
  <div class="box">
<video src="123.mp4" controls autoplay preload="auto" class="vid"></video>
<div class="box1">
    <img src="timg.jpg" alt="">
    <p>分享</p>
    <img src="下载.jpg" alt="">
    <p>画质</p>
    <img src="456.jpg" alt="">
    <p>锁屏</p>
    <img src="下载 (1).jpg" alt="">
    <p>赞赏</p>
     </div>
 </div>
 
    </body>
</html>

效果如下:这是鼠标未点击之前的效果,鼠标经过才会出现真正的效果。
点击一个div显示或者隐藏一个div(视频video)_第1张图片

你可能感兴趣的:(html)