当我放视频，然后放一个SVG图标时。悬停无法正常工作： **图标在视频上方**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nombre Stand</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/agency.min.css" rel="stylesheet">
<style>
svg{
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
background-repeat:no-repeat;
width:10%;
height:10%;
position:absolute;
left:75%;
right:0%;
top:55%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
svg:hover #izq {
fill: #DA4567;
}
</style>
</head>
<body>
<a href="#" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M32.337,33.807c-1.199-2.181-2.847-3.623-4.188-5.305
c-2.059-2.582-4.243-5.062-6.429-7.534c-0.688-0.779-0.153-1.097,0.28-1.612c3.306-3.923,6.586-7.87,9.88-11.802
c0.228-0.271,0.608-0.499,0.476-0.892c-0.18-0.533-0.696-0.267-1.069-0.338c-0.057-0.011-0.12,0.008-0.175-0.004
c-3.144-0.702-5.203,0.831-7.066,3.272c-2.575,3.376-5.369,6.578-8.127,9.802c-0.585,0.684-0.667,1.042-0.04,1.771
c3.341,3.887,6.613,7.838,9.914,11.762c0.386,0.458,0.795,0.885,1.46,0.881C28.873,33.801,30.491,33.807,32.337,33.807z"/>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M21.628,33.815c-2.317-2.749-4.283-5.09-6.26-7.421
c-1.563-1.841-3.121-3.687-4.722-5.493c-0.627-0.707-0.091-1.017,0.292-1.473c3.341-3.967,6.666-7.948,10-11.921
c0.224-0.267,0.603-0.477,0.45-0.891c-0.162-0.437-0.596-0.281-0.92-0.286c-1.23-0.019-2.467,0.064-3.691-0.027
c-1.119-0.083-1.522,0.829-2.054,1.452c-3.248,3.811-6.403,7.705-9.667,11.5c-0.681,0.792-0.822,1.169-0.064,2.028
c3.272,3.712,6.494,7.474,9.623,11.314c0.682,0.836,1.291,1.267,2.322,1.229C18.329,33.777,19.724,33.815,21.628,33.815z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</a>
<div id="video1">
<video id="myVideoder" width="100%" height="100%">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
</div>
<!--<body background="img/Stand.png" id="fondo"> -->
<!-- Header
<header>
</header>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
</body>
</html>
** SVG图标：代码已简化。称为“ izq”的ID **
<a href="#" target="_blank">
<svg ........
<path **id="izq"** d="M32.337,33............
}</a>
SVG .CSS
svg{
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
background-repeat:no-repeat;
position:absolute;
margin:auto;
background-size:contain;
background-position: center;
}
这是.CSS悬停代码
svg:hover #izq {
fill: #DA4567;
position:absolute;
display: inline-block;
background-size:contain;
}
我添加了视频示例：
在图像上方-可以！：https://www.youtube.com/watch?v=4PHMMrr23Qw
在视频上方-过度操作： https://www.youtube.com/watch?v=NzmcER9q2j8
共享编辑删除标记
答案 0 :(得分：0)
HTML中<video>元素位于<svg>之后。如果您不更改顺序，它将捕获鼠标事件。要么
<a>在<video>之后（见下文），或z-index> 0来指定SVG位于顶部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nombre Stand</title>
<style>
svg {
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
width:10%;
height:10%;
position:absolute;
left:75%;
right:0%;
top:55%;
bottom:0%;
margin:auto;
}
svg:hover #izq {
fill: #DA4567;
}
</style>
</head>
<body>
<div id="video1">
<video id="myVideoder" width="100%" height="100%">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
</div>
<a href="#" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<g>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M32.337,33.807c-1.199-2.181-2.847-3.623-4.188-5.305
c-2.059-2.582-4.243-5.062-6.429-7.534c-0.688-0.779-0.153-1.097,0.28-1.612c3.306-3.923,6.586-7.87,9.88-11.802
c0.228-0.271,0.608-0.499,0.476-0.892c-0.18-0.533-0.696-0.267-1.069-0.338c-0.057-0.011-0.12,0.008-0.175-0.004
c-3.144-0.702-5.203,0.831-7.066,3.272c-2.575,3.376-5.369,6.578-8.127,9.802c-0.585,0.684-0.667,1.042-0.04,1.771
c3.341,3.887,6.613,7.838,9.914,11.762c0.386,0.458,0.795,0.885,1.46,0.881C28.873,33.801,30.491,33.807,32.337,33.807z"/>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M21.628,33.815c-2.317-2.749-4.283-5.09-6.26-7.421
c-1.563-1.841-3.121-3.687-4.722-5.493c-0.627-0.707-0.091-1.017,0.292-1.473c3.341-3.967,6.666-7.948,10-11.921
c0.224-0.267,0.603-0.477,0.45-0.891c-0.162-0.437-0.596-0.281-0.92-0.286c-1.23-0.019-2.467,0.064-3.691-0.027
c-1.119-0.083-1.522,0.829-2.054,1.452c-3.248,3.811-6.403,7.705-9.667,11.5c-0.681,0.792-0.822,1.169-0.064,2.028
c3.272,3.712,6.494,7.474,9.623,11.314c0.682,0.836,1.291,1.267,2.322,1.229C18.329,33.777,19.724,33.815,21.628,33.815z"/>
</g>
</svg>
</a>
</body>
</html>