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

Question

我正在使用opacity属性并编写以下代码：

#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，所以我只期望悬停{{1}被覆盖。但是，在悬停之前的所有item div也都是隐藏的。发生了什么事？

Answer 1

你的问题是绝对定位：它是相对于“包含块”，它不是父类，而是具有非静态位置的ascendent元素（在你的例子中是#outer元素）。

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

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

工作片段：

#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>

Answer 2

我已经使用了一些有启发性的jquery标签来简化

＆＃13;

＆＃13;

$(function(){
	
  $('.item').hover(
  	function(e){
   
  		$('.item').removeClass('hover')
      $(this).addClass('hover')
      
  		$('.content').removeClass('show')	
		var content = $(this).attr('data')
      $(content).addClass('show')
      
  },
  function(e){
  		$('.item').removeClass('hover')
      $('.content').removeClass('show')	
  }
  
  )
})

＆＃13;

#outer {
  width: 500px;
  height: 500px;
  background: pink;
  margin: 50px;
  position: relative;
}
.btn{
   position:absolute;
   left:0;
   top:0;
   z-index:2
}
.btn .item {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: black;
  opacity: 0.5;
  float: left;
  position: relative;
  -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
}
.content {
  width: 500px;
  height: 500px;
  background: red;
  position: absolute;
  left:0;
  top: 0;
  z-index:1;
  text-align:center;
  opacity: 0;
  -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
}
.item.hover {
  opacity: 1;
}

.content.show{
   opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
   <div class="btn">
      <div class="item" data="#content1"></div>
      <div class="item" data="#content2"></div>
      <div class="item" data="#content3"></div>
      <div class="item" data="#content4"></div>
   </div>
  <div class="content" id='content1'>content 1
  </div>
  <div class="content"  id='content2'>content 2
  </div>
  <div class="content"  id='content3'>content 3
  </div>
  <div class="content" id='content4'>content 4
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;