SVG 悬停不起作用将鼠标放在视频上时更改箭头图标的颜色

当我放视频然后放一个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共享编辑删除标志

<video>元素位于 HTML 中的<svg>之后。如果不以某种方式更改顺序，它将捕获鼠标事件。也：

对文件中的元素重新排序，使<a>位于<video>之后(见下文(，或者
指定 SVG 应位于顶部，方法是将其指定为z-index> 0。

<!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>

相关内容

最新更新

热门标签：

SVG 悬停不起作用 将鼠标放在视频上时更改箭头图标的颜色

相关内容

最新更新

热门标签：

SVG 悬停不起作用将鼠标放在视频上时更改箭头图标的颜色