Question

我有一个嵌入在页面中的youtube iframe，其中透明div正好位于其顶部。

我在使用CSS的div中有链接：只有在鼠标悬停在视频上时才悬停以显示。

是否可以让用户点击div播放视频而不关闭div上的悬停效果？我不能让div变小。

我正在寻找与pointer-events:none类似的东西，但它维护了div元素的悬停事件。是否有一个JavaScript解决方案？

代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video test</title>
<style>
#storymenu{position:absolute; width:515px; height:386px;}
#storymenu a{display:none; margin-left:10px; margin-top:20px; padding:5px; background:#FFF;}
#storymenu:hover a{display:inline-block}
</style>
</head>

<body>
<div id="storymenu">
<a href="#" onclick="alert('next');return(false);"><span>Next Story</span> &gt;</a>
<a href="#" onclick="alert('prev');return(false);">&lt; <span>Prev Story</span></a>
</div>
<iframe width="515" height="386" src="http://www.youtube-nocookie.com/embed/5It4y8834Zd" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Answer 1

你去......

这是Working Fiddle

<强> CSS

#video {
width:500px;
height:200px;
background-color:#333333;
display:block;
position:absolute;
left:0px; top:0px;
z-index:1;
}

#video a {
color:#ffffff;
}

#overlay{
display:none;
position:absolute;
left:30px; top:50px;
z-index:5;
}

#overlay a {
color:orange;
}

<强> HTML

<div id='holder'>
<div id='video'><a href=''>Link</a></div>
<div id='overlay'><a href=''>Overlay Link</a></div>
</div>

<强> JQuery的

$('#holder').on('mouseenter', function(){
$('#overlay').fadeIn(250);
});

$('#holder').on('mouseleave', function(){
$('#overlay').fadeOut(250);
});

禁用CSS单击事件（单击一个元素），维护该元素的CSS悬停事件

1 个答案: