css - 移动鼠标 CSS 时失去悬停

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 已关闭。当您移动鼠标时，您实际上是在 a 而不是 b 上滚动，因为 b 具有悬停状态，所以您正在固定滚动，这正在重置位置。将 a 设置在 b 之后，它将按需要工作。

z-index:999;

http://jsfiddle.net/2g2uY/

zindex 基本上是堆栈号，所以如果某物具有更高的 zindex，则意味着它在另一个元素的前面。这只有在元素重叠、使用绝对和相对定位元素时才会真正发挥作用。

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