Question

So, I’m a beginner with HTML and CSS and all that, and I’ve attempted to learn jQuery and JavaScript but no success just yet. Anyway, I wanted to hover over one place, and trigger a div elsewhere, so I used the adjacent siblings code, but the problem is that once the event has been triggered, and the box that I want is there, if I move my mouse, it triggers it again, instead of staying on the ‘hover’ element until I move my mouse off. Is there any way to fix this?

This is the adjacent sibling elements part of the 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;
}​

Here is my code: in JSFiddle

Help would be much appreciated!

Answer 1

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.