javascript - 悬停时淡出元素并允许用户选择下面的文本 - 可能吗？

Question

考虑以下 HTML:

<div id="mydiv">Big shiny error goes here</div>

使用下面的 CSS，这个 div 会固定在右上角，即使页面滚动也是如此。

#mydiv {
  position:fixed;
  right:0;
  top:0;
  background-color: red;
}

是否可以让 mydiv 在悬停时淡出到 10% 的不透明度，并允许用户使用下面的页面元素，例如选择文本和复制到剪贴板？这个想法是 mydiv 应该始终保持可见，但它不应该阻止用户的操作。

作为额外的好处，如果在下面找不到任何元素，最好选择 mydiv 的文本。

编辑 hover + z-index 方法似乎效果不佳，see this jsfiddle .

Answer 1

我能想到的最接近的是给内容区域一个z-index，比如说，1。然后，使用:hover，给错误div一个降低 z-index 以将其定位在主要区域的后面。这将允许主要内容上的鼠标事件。您还可以根据需要调整不透明度以使其淡出。我相信 IE 将允许您在元素前面没有其他内容的情况下单击/拖动/进行任何操作，但 Chrome 和 Firefox 会认为它被内容区域隐藏了，即使那里实际上“什么都没有”。