给视频加上 遮盖层, 移入隐藏, 移开 显示遮盖 ;;; mouseover ,和 mouseout
如下图所示:
主要就是 给遮盖定位 . 但是有一个问题就是 video的高度不是固定的 . 如果 video 和 遮盖 在一个 父级div里, 无法确定位置, 如果用js效果不是很好.
思路: video 和 遮盖不在一个div里:
html:
<!-- 默认视频 -->
<div class="defaultVideo">
<video controls>
<source src="../eypt_uploads/json01.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> </video>
</div>
<div class="test">
<div class="courseShadow">
<span class="courseShadowCourseName">舞蹈鉴赏</span>
<span class="courseShadowTeacher">刘健</span>
</div>
</div>
设置一个div.test 为 相对定位; div.courseShadow 相对 div.test进行 绝对定位, 这里 的top 取 负值就可以了.
css:
.defaultVideo video {
width: 100%;
/*height: auto;*/
/*border: 1px solid black;*/
} .test {
9 position: relative;
} .courseShadow {
height: 80px;
width: 100%;
background-color: #D9D5D2;
opacity: 0.7; position: absolute;
left: 0px;
20 top: -80px;
}
注意 : 第 9行 , 和 第20行.
-----------------------------------------------------------------------------------------------------------------------
如果你是这样的html结构, 因为 video的高度自动增长的, 即使使用js ,也很难实现 定位.
<!-- 默认视频 -->
<div class="defaultVideo">
<video controls>
<source src="../eypt_uploads/json01.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> </video>
<div class="courseShadow">
<span class="courseShadowCourseName">舞蹈鉴赏</span>
<span class="courseShadowTeacher">刘健</span>
</div>
</div>
-----------------------------------------------------------------------------------------------------------
增加 鼠标移入和 移除事件:
/**
* [setCourseShadow 设置阴影的 显示 和隐藏]
*/
function setCourseShadow()
{
$(".defaultVideo").mouseover(function(){
$(".courseShadow").hide();
}).mouseout(function(){
$(".courseShadow").show();
});
}
注意:这里 使用了 mouseover ,和 mouseout 是因为 这两个事件支持 冒泡 . 也就是说当鼠标 移入 或者 移除 div.defaultVideo 或者 div.defaultVideo的任意子元素,后代元素 时 ,事件都会发生.
给视频加上 遮盖层, 移入隐藏, 移开 显示遮盖 ;;; mouseover ,和 mouseout的更多相关文章
- CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...
- JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- modal 移除遮盖层
弹框关闭时 移除遮盖层 $("#modal").bind('hide.bs.modal',function(){ $(".modal-backdrop").re ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- echarts隐藏之后的显示问题
好久没有更新博客了,今天搞了快一天的网页自适应,头晕...因为最近开始做项目,项目中需要用到图表方面的知识,于是乎接触到了echarts,所以其实我也算是新手了.只是近几天弄了很久的关于图表隐藏之后再 ...
- QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失
在最近接到的需求是这样的,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折 ...
- 【extjs】 Extjs中的Ext.grid.Panel隐藏列会显示在表头中解决方法
在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中,但是这个一般没有什么用处,只是用于后台取值的作用,感兴趣的朋友可以了解下啊,希望本文对你有所帮助 在Ex ...
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...
随机推荐
- 轮播,试用与微信公众号,apicloud苹果安卓
<head> <script type="text/javascript" src="script/jquery.min.js">< ...
- Tanya and Password CodeForces - 508D (欧拉回路)
大意:给定n个长为3的子串, 求一个长为n+2的字符串包含所有子串. 相邻两个字符开一个节点, 建图跑欧拉回路, 若存在的话长度一定是$\le n+2$.
- js中const、let、var的区别
今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...
- GPLT L2-014 列车调度
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805063166312448 分析:明显从右到左列车的序号需要依 ...
- 背包DP 存在异或条件的状态转移问题
题目链接 分析:有大佬说可以用线性基写,可惜我不会,这是用DP写的 题目明确说明可到达的位置只与能值有关,和下标无关,我们就可以排个序,这样每个数可以转移的区间就是它的所有后缀 我们可以用dp[i][ ...
- PAT 1003 Emergency
1003 Emergency (25 分) As an emergency rescue team leader of a city, you are given a special map of ...
- 浅谈mysql中各种表空间(tablespaces)的概念
mysql中,会涉及到各种表空间的概念,虽然,很多方面这些概念和Oracle有相似性,但也有很多不同的地方,初学者很容易被这些概念弄的晕头转向,从而,混淆这些概念的区别和理解,下面,就简要介绍和说明一 ...
- [LeetCode] 98. Validate Binary Search Tree(是否是二叉搜索树) ☆☆☆
描述 解析 二叉搜索树,其实就是节点n的左孩子所在的树,每个节点都小于节点n. 节点n的右孩子所在的树,每个节点都大于节点n. 定义子树的最大最小值 比如:左孩子要小于父节点:左孩子n的右孩子要大于n ...
- CentOS下安装MYSQL8.X并设置忽略大小写
安装 在官网上下载:mysql80-community-release-el7-2.noarch.rpm.安装方式与5.7基本相同.详细安装过程见:CentOS下安装mysql5.7和mysql8.x ...
- CentOS查询系统版本
1.cat /proc/version 2.cat /etc/redhat-release 3.cat /proc/version 4.uname -a