Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Myles Hyson
Myles Hyson
8,853 Points
Posted by Myles Hyson
Myles Hyson
8,853 Points

Hover spazzing out

I'm trying to create an arrow in my header that disappears when the user hovers over it and says "Scroll Down" and comes back when the user moves the mouse, hiding the paragraph "Scroll Down". However I can't seem to find a way to do this without it spazzing out.

$("#scroll").append("<img id='arrow' src='../Images/arrow.svg'>");

$("#scroll").hover(function(){
  $("#arrow").prev().show();
  $("#arrow").hide();
}, function(){
  $("#arrow").prev().hide();
  $("#arrow").show();
});

Here is the index.html file

<div id="button-wrapper">
           <button id="scroll">
              <span>Scroll Down</span>
           </button>
         </div>

2 Answers

Ryan Duchene
PLUS
Ryan Duchene
Courses Plus Student 46,022 Points
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

The reason why this is happening is a bit complicated. So, when all is at rest, the arrow is visible, and the "Scroll Down" text is hidden. When the user hovers over the arrow, it disappears, and the text appears. But, because the arrow is no longer visible, the cursor is no longer hovering over it, so the whole thing returns to its initial state (arrow visible, text hidden). Except now, the cursor is once again hovering over the arrow, so the two switch again. The cycle keeps repeating itself.

To fix this, you'll probably need to wrap those two elements (the arrow and the text) with a div or something and attach the hover event to the wrapper, rather than the arrow. Just the hover event, nothing else.

Hope this helps!

Myles Hyson
Myles Hyson
8,853 Points
Myles Hyson
Myles Hyson
8,853 Points

Thanks! This helped a lot, I ended up just wrapping everything in a div.