禁用 CSS click 事件（点击一个元素），保持该元素的 CSS hover 事件答案

【问题标题】：Disable CSS click event (click through an element), maintaining CSS hover event of that element禁用 CSS click 事件（点击一个元素），保持该元素的 CSS hover 事件
【发布时间】：2012-11-03 05:38:42
【问题描述】：

我有一个嵌入在页面中的 youtube iframe，透明 div 正好放在它上面。

我在 div 中有链接，我使用 CSS :hover 使其仅在鼠标悬停在视频上时可见。

是否可以允许用户在不关闭 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>

【问题讨论】：

如果您将 div 完全显示在视频上，那么如果您没有在 javascript 代码中明确执行此操作，则任何鼠标事件都不会过滤到该视频。还是我错过了什么？
重点是在 div 上应用 CSS 属性 pointer-events:none 将允许点击通过它，但也会禁用悬停效果。这里有中间立场吗？我想禁用点击但启用悬停。
您在div 中显示链接，悬停时可见？但是您想点击通过div（带有链接）并与视频互动吗？ ...为什么div 在那里？
@David - 也许他想在视频上显示链接或广告？不知道……只是一个想法。我想这就是他在jsfiddle.net/videsignz/LGYmB之后的样子
是的，div 用于包含链接并在悬停时显示它们。在我网站的某些页面上，视频不存在，因此 div 用于触发悬停效果。

标签： javascript html css

【解决方案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);
});

【讨论】：

有趣的方法 - 非常感谢@VIDesignz。我没有在这个项目中使用 jquery，但我已经修改了你的演示以在纯 CSS 中工作：jsfiddle.net/EJXEm
@cronoklee 你介意展示你的 CSS 吗？很好奇:)
我在上面链接了你小提琴的一个叉子（这是一个奇怪的句子！）。它不工作吗？
@cronoklee 伙计，首先，把我的小提琴留给我（什么？！？！），其次，我不知道我是如何错过链接的......真是个傻瓜！看起来不错！