Question

好的，这就是我要做的事情：

我有一个页面结构，有几个div s，嵌套div等等
我想处理两种不同类型的事件：点击和悬停。
对于这两个活动，我想要一个透明的DIV叠加层（有一些颜色色调？），高于前面提到的div覆盖所有它。

如何做到这一点？

有什么想法吗？

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

Answer 1

在这种情况下，我会选择：伪类。只需在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: none CSS3属性。

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

透明DIV叠加

2 个答案: