javascript - 透明 DIV 覆盖

Question

好的，这就是我要做的:

• 我有一个页面结构，包含多个 div、嵌套的 div 等
• 我想处理 2 种不同类型的事件:点击和悬停。
• 对于这 2 个事件，我想要一个透明的 DIV 覆盖层(带有一些颜色？)覆盖在上述 div 之上。

如何做到这一点？

有什么想法吗？

---

这是一个 fiddle : 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;
}

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

您编辑的 fiddle :http://jsfiddle.net/cFw7d/3/