Div 的悬停倾斜度

Question

我有 2 个 div，我试图隐藏第一个，并使用悬停显示第二个，但我看不到第二个 div，因为第一个消失了在显示none和块

的循环中

这是片段

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

要将它们放在彼此之上，两者都需要 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，这对悬停效果不佳。

新 fiddle: http://codepen.io/anon/pen/MKaLzQ?editors=110

Answer 2

您可以使用不透明度，而不是将 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;

}

Answer 3

如果您正在寻找 纯 CSS 解决方案，请参阅 here。你只需要在 一个父 div 中同时使用 div 然后在父悬停时更改 css 并切换 display:none 至 display:block.

Answer 4

试试这个

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

Answer 5

您应该将两个 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

Div 的悬停倾斜度

Div's hover tilt

html

css

hover