Div的悬停倾斜

Question

我有两个 div，我想隐藏第一个，并在鼠标悬停时显示第二个，但我看不到第二个 div，因为第一个 div 在 display none 和 block 之间循环。以下是代码片段：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>

- Ivan Palma

---

使用鼠标悬停切换开关或显示隐藏功能。 - Leo the lion

item-inner-hover 应该放在 item-inner 里面吧？ - Nenad Vracar

Answer 1

你可以使用透明度代替将div叠放在一起时的display属性。

.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;

}

- Jo13

Answer 2

你应该将这两个DIV放在另一个DIV中，这样当你悬停在父元素上时，你就可以访问它的子元素: HTML :

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

CSS：

.outer  {
  width:200px;
  height:200px;
}
.item-inner {
  display:block;
  background: red;
  width: 200px;
  height: 200px;  
}

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

.outer:hover .item-inner {
    display: none !important;
}
.outer:hover .item-inner-hover {
    display: block !important;
    background-color: blue;
}

段落中的强调部分： http://codepen.io/pen/KVdJby

- Medhat

Answer 3

如果您正在寻找纯CSS解决方案，请查看此处。您只需将两个div放在一个父级div中，然后在父级hover时更改css，将display:none切换为display:block即可。

- Leo the lion

Answer 4

为了将它们叠放在一起，两者都需要具有“position: absolute;”属性，顶部的一个（“.item-inner”）具有更高的“z-index”值。底部的一个（“.item-inner-hover”）不需要悬停设置，因为如果顶部的一个变得不可见，它就会变得可见。

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

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

.item-inner-hover {
  position: absolute;
  height: 200px;
  width: 200px;
  background: blue;
  z-index: 50;
}

编辑：opacity: 0.0 对于悬停状态更好，因为display: none实际上会将DIV从显示中移除，这对于悬停效果不起作用。

新的代码片段：http://codepen.io/anon/pen/MKaLzQ?editors=110

- Johannes

Answer 5

试试这个

.item-inner {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}

.item-inner-hover {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: blue;
  opacity: 0;
  transition: all 0.3s ease-in;
}

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

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

或者如果你想把div作为兄弟元素保留，你可以这样做

.item-inner {
  background: red;
  width: 200px;
  height: 200px;
  position: relative;
  transition: all 0.3s ease-in;
  display: inline-block;
}

.item-inner-hover{
  display: block;
  height: 200px;
  width: 200px;
  background-color: blue;
  opacity: 0;
  transition: all 0.3s ease-in;
  display: inline-block;
}

.item-inner:hover ~ .item-inner-hover {
  opacity: 1;
}

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

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

- Nenad Vracar