html - Div的悬停倾斜

Question

我有 2 个 div，我试图隐藏第一个，并使用悬停显示第二个，但我看不到第二个 div，因为第一个进入不显示和阻塞的循环。

这是片段

http://codepen.io/IvanPalma/pen/qbOLJp?editors=110

.item-inner {
    background: red;
    width: 200px;
   height: 200px;
    z-index: 99;
}

.item-inner:hover {
  display: none;
}

.item-inner-hover {
  display:none;
}

.item-inner.hover:hover {
  display: block;
  height: 200px;
  width: 200px;
  background-color: blue;
}

<div class="item-inner"></div>
<div class="item-inner-hover"></div>

Answer 1

您可以使用不透明度而不是将 div 堆叠在一起显示。

.item-inner {
  background: red;
  width: 200px;
  height: 200px;
  z-index: 99;
  opacity:1;
  position: absolute; top: 0; left: 0;
}

.item-inner:hover {
  opacity: 0;
}

.item-inner-hover {
  height: 200px;
  width: 200px;
  background-color: blue;
  position: absolute; top: 0; left: 0;

}