CSS位置和不透明度样式会干扰悬停和点击事件

Question

最近我正在玩一个自定义模式，我很难解雇它。

基本上有一个锚标记，其绝对位置放在具有相对位置的div上。当鼠标明显位于锚点上方且点击事件未被触发时，Css悬停样式未应用于它。

示例：

Defective Dismiss Anchor

Working Dismiss Anchor

这两个例子的区别在于css

在有缺陷的情况中存在以下样式

.modalDialog
{
   /* ... */
   -webkit-transition: opacity 400ms ease-in;
   -moz-transition: opacity 400ms ease-in;
   transition: opacity 400ms ease-in;
   pointer-events: none;
}
.modalDialog:target
{
    opacity: 1;
    pointer-events: auto;
}

在工作示例中，所有这些样式都已删除，但其他所有样式都保持不变。

我对z-index作为罪魁祸首的原始假设被证明是不真实的，我也怀疑固定和相对的立场是否应该受到指责（未经证实），看起来不透明就应该受到指责。

我知道为什么不需要删除的样式，但我不明白他们为什么要阻止悬停和单击事件的触发？

将不胜感激。

Answer 1

导致问题的是pointer-events: none。

此属性控制元素如何响应鼠标事件，在本例中为悬停并单击。

看起来它试图在:target选择器上被覆盖，但在这种情况下这不起作用，因为.modalDialog:target表示“当网址为#modalDialog时”。但是，.modalDialog没有ID，所以无论如何它都不能成为目标。

来自CSS技巧：

  

CSS中的target伪选择器匹配URL中的哈希值和元素的id相同。

这是一个小提琴更新，只删除了指针事件CSS规则，并且它可以正常工作。

http://jsfiddle.net/zPgj8/11/