javascript - 透明 DIV 叠加

Question

好的，这就是我想要做的：

• 我有一个页面结构，有几个divs，嵌套divs等
• 我想处理 2 种不同类型的事件：单击和悬停。
• 对于这两个事件，我想要一个透明的DIV覆盖层（带有一些颜色？）在上述div覆盖所有的上面。

如何才能做到这一点？

有任何想法吗？

---

这是一个小提琴：http: //jsfiddle.net/cFw7d/2/ （虽然我无法让它正确显示——它实际上是一个 jQuery Mobile 页面......）

Answer 1

在这种情况下，我会选择 :after 伪类。只需在 CSS 上添加以下内容：

.msp-selected-hover:after {
    content: ' ';
    position: absolute;
    background: rgba(0,0,120,0.4);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

您可能希望为悬停和点击创建不同的类，以及仅针对某些元素。

您编辑的小提琴：http: //jsfiddle.net/cFw7d/3/

Answer 2

如果你想要一个块在另一个块之上，并且能够点击下面的块，你将不得不使用pointer-events: noneCSS3 属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events