Question

我遇到了一个奇怪的问题，我有一个div换行另一个div，结构如下：

<div class="col-md-4 view small_img">
    <div class="blue"></div>
</div>

我希望当我将鼠标悬停在div.small_img上时，黑色区块将覆盖蓝色区块，因此我将其设置为:after并使用flexbox并进行定位。

Chrome中的一切看起来都很棒，但是当我切换到Firefox时，我不知道为什么背景不会覆盖在我的蓝色块上，而只是在它旁边显示一个小方块。

＆＃13;

.small_img {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

＆＃13;

<div id="page-wrapper">
  <div class="row">
    <h1 class="page-header center">flexbox hover cover effect</h1>
    <h4 class="center">I want black block cover my blue block</h4>
    <!-- main Content -->
    <div class="row col-md-offset-1 col-md-10">
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

任何人都知道发生了什么？

也包括我的jsfiddle。

Answer 1

您可以通过设置top的{{1}}和left来修复 - 请参阅下面的演示和updated fiddle here。

＆＃13;

.small_img:hover:after

＆＃13;

.small_img {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

＆＃13;

Flexbox div在Chrome和Firefox

1 个答案: