透明DIV覆盖

Transparent DIV Overlay

本文关键字：覆盖 DIV 透明      更新时间：2023-09-26

好吧，下面是我要做的：

  • 我有一个页面结构，有几个div、嵌套的div等
  • 我想处理两种不同类型的事件：点击和悬停
  • 对于这两个事件，我希望在上述div之上覆盖一个透明的DIV覆盖层（带有一些色调？）

如何做到这一点？

有什么想法吗？

这是一把小提琴：http://jsfiddle.net/cFw7d/2/

（尽管我无法正确显示它——实际上它是一个jQuery Mobile页面…）

在这种情况下，我会选择：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/

如果您想在另一个块的顶部放置一个块，并且能够单击下面的块，则必须使用pointer-events: none CSS3属性。

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

相关文章：