Question

所以，我是HTML和CSS的初学者，所有这一切，我都试图学习jQuery和JavaScript，但还没有成功。无论如何，我想悬停在一个地方，并在其他地方触发div，所以我使用了相邻的兄弟代码，但问题是一旦事件被触发，我想要的盒子就在那里，如果我移动我的鼠标，它会再次触发它，而不是停留在'悬停'元素上，直到我将鼠标移开。有什么方法可以解决这个问题吗？

这是CSS的相邻兄弟元素部分：

.b:hover ~ .a {
  position:absolute;
  height:1000%;
  width:100px;
  margin-top:-1000px;
  margin-left:100px;
  background-color:#b6c9e7;
  z-index:1000;
  opacity:1;
  transition:  all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition:  all 0.4s ease-in-out 0s;
  -o-transition:  all 0.4s ease-in-out 0s;
  -webkit-animation-duration: 2s;
}

这是我的代码：in JSFiddle

非常感谢帮助！

Answer 1

您的zindex已关闭。当您移动鼠标时，实际上是在一个非b上滚动，因为它是具有悬停状态的b，您正在进行滚动操作，这将重置位置。将a设置为b后面，它将按预期工作。

z-index:999;

http://jsfiddle.net/2g2uY/

zindex基本上是堆栈编号，因此如果某个东西有更高的zindex，则意味着它位于另一个元素的前面。当元素覆盖时，当使用绝对且相对定位的元素时，这才真正发挥作用。

此外，当您使用：hover选择器时，您无需重新定义您未更改的元素。他们都是遗传的;只更改悬停状态下不同的属性。

移动鼠标CSS时丢失悬停

1 个答案: