html - 不透明度影响元素被另一个元素隐藏的方式

Question

我在玩不透明度属性并编写了以下代码:

#outer {
  width: 500px;
  height: 500px;
  background: pink;
  margin: 50px;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: black;
  opacity: 0.5;
  float: left;
}
.inner {
  width: 500px;
  height: 500px;
  background: red;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
.item:hover {
  opacity: 1;
}
.item:hover .inner {
  display: block;
}

<div id="outer">
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
</div>

我希望 inner div 在其父 item div 悬停时显示并覆盖其父 item div。因为所有其他 item div 都设置为透明以通过 inner div 显示，只有悬停的 item div 的不透明度更改为 1，我希望只覆盖悬停的 item。但是，悬停的 div 之前的所有 item div 也都被隐藏了。发生了什么事？

Answer 1

你的问题是绝对定位:它是相对于“包含 block ”的，它不是父元素，而是具有非静态位置的上升元素(在你的情况下， #outer 元素).

只需在.item中添加position: relative，它就会成为包含框。

请注意，这与不透明度无关。

工作片段:

#outer {
  width: 500px;
  height: 500px;
  background: pink;
  margin: 50px;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: black;
  opacity: 0.5;
  float: left;
  position: relative;
}
.inner {
  width: 500px;
  height: 500px;
  background: red;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
.item:hover {
  opacity: 1;
}
.item:hover .inner {
  display: block;
}

<div id="outer">
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
  <div class="item">
    <div class="inner"></div>
  </div>
</div>