As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps re-triggering instead of staying on the hover element until I move my mouse off. Is there a way to fix this?
Below is the CSS for the adjacent sibling elements:
.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;
}
You can find my code here: JSFiddle
Any help or suggestions would be greatly appreciated!