Question

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

这是片段

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;

}

Answer 2

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

Answer 3

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

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

Answer 5

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

或者，如果你想将div保持为兄弟姐妹，你可以这样做

＆＃13;

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

＆＃13;

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

＆＃13;

Div的悬停倾斜

5 个答案: