重叠元素具有不透明度并处理那些“悬停” [英] Overlapped elements with opacity and handling the 'hover' on those

问题描述

这是关于如何处理重叠元素的不透明度并使用JS解决方案在悬停时使其保持一致的问答。

This is a Q/A on how to handle the opacity of overlapping elements and make it consistent while hover, with a JS solution.

要求是开发两个透明且重叠的元素，如下面的两个红色框。这些必须是透明的，以便背景内容可见。

The requirement is to develop two elements, which are transparent and overlapping, like the two red boxes below. These need to be transparent so that the background contents are visible.

现在，当悬停在任何这些元素上时，特定元素应该变为不透明，如下所示。

Now, while hover on any of these elements, the particular element should turn opaque like below.

推荐答案

这是一个只有CSS的解决方案，它使它更有效率。例如：

There's a CSS only solution, which makes it a bit more efficient. Like this for example:

body {
  background-image: linear-gradient(45deg, transparent 50%, #aaa 75%);
  background-size: 20px 20px;
}

#a {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50px;
  left: 50px;
  background: rgba(255, 0, 0, 1);
}

#b {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 125px;
  left: 125px;
  background: rgba(255, 0, 0, 1);
}

#wrapper {
  opacity: 0.5;
}

/* instead of changing the classes,  
you can use selectors like this:*/

#wrapper:hover #a:hover,
#wrapper:hover #b:hover {
  opacity: 1;
  z-index: 10;
}

#wrapper:hover {
  opacity: 1;
}

#wrapper:hover #b,
#wrapper:hover #a {
  opacity: 0.5;
  z-index: -1;
}

<div id=wrapper>
  <div id="a">
  </div>
  <div id="b">
  </div>
</div>

这篇关于重叠元素具有不透明度并处理那些“悬停”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！