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>

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

2 个答案: