3

所以，我是 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;
}​

这是我的代码：在 JSFiddle

帮助将不胜感激！

4

1 回答 1

3

Your zindex is off. When you move the mouse you are actually rolling over a not b, and as it is b that has the hover state you are pining the roll out, which is resetting the position. set a to be behind b and it will work as desired.

z-index:999;

http://jsfiddle.net/2g2uY/

The zindex is basically the stack number so if something has a higher zindex it means it is in front of another element. This only really comes into play when elements overlay, when using absolutely and relatively positioned elements.

Also, when you use a :hover selector you don't need to redefine the elements that you are not changing. They are all inherited; only change the attributes that are different on the hover state.

于 2012-10-19T01:18:20.827 回答