当我添加更多元素时，悬停停止工作

Question

这是一个简单的网站：1个特色文章和3个小盒子。 我的悬停效果变暗。 问题是当我添加小盒子时。 它停止工作=（

<div class="bigBox">
  <div class="featured_post">
    <span></span>
    <div class="category">Stuff</div>
    <h1>Text will go here</h1>
  </div>  
</div>

<div class="small_boxes">
  <div class="box01">
    <span></span>
    <div class="category">Stuff</div>
    <h1>Text will go here</h1>
  </div>  

使用CSS的完整代码：

• 1个小盒子（工作） http://codepen.io/tsalexey544/pen/wBExPJ?editors=110
• 3个小盒子（无效） http://codepen.io/tsalexey544/pen/xbaJpe?editors=110

Answer 1

您的.small_boxes （ box01 ， box02 ， box03 ）缺少position: relative 。 如果添加，就完成了。

您的盒子float在他们的父母中。 他们的父母的position: relative 。 span s获得该父级的全高+宽度，即0x0，因为其子级浮动。

.small_boxes    <-- position: relative. 0x0
  .box01/02/03  <-- float: left
    span        <-- 100% of .small_boxes = 0x0

你想要什么：

.small_boxes
  .box01/02/03  <-- float: left, position: relative;
    span        <-- 100% of .box = desired effect

Answer 2

您可以使用伪元素来实现此效果，这将大大减少标记：

 .cont { position: relative; background: url(http://japanpapa.ru/fun/jpap/img/post01.jpg); background-size: 100% 100%; height: 100px; width: 100px; displaY: inline-block; margin: 10px; } .text { display: inline-block; color: white; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; line-height:100px; } .cont:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: black; transition: all 0.4s; opacity: 0; } .cont:hover:before { opacity: 0.6; } 

 <div class="cont"> <div class="text">text1</div> </div> <div class="cont"> <div class="text">text2</div> </div> <div class="cont"> <div class="text">text3</div> </div>