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

Jiten Mehta
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points
Posted by Jiten Mehta
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

Help with mouseEvents

Hello fellow coders!

I'm relatively new to JavaScript and recently came across an opportunity at work where I could utilise some of the skills I have recently learnt on Teamtreehouse.

I am attempting to manipulate the DOM of a website.

The idea is to append a <p> and have it transition in and out.

I am using the mouseover and mouseleave events to create this effect.

I've nearly got this working, however, once the mouseleaves event fires, the appended element behaves differently to what is stated in the mouseleave event.

I have recorded a quick video of what I am seeing.

https://www.loom.com/share/b33294b0d7394783879ac6e8002de6c7

I would greatly appreciate if someone could tell me where I am going wrong!

I will paste my javascript code below. Also, it would be awesome to have a suggestion on how I could make my code more DRY.

Thanks, everyone.

const para = document.createElement('p');

const location_sticky = document.querySelector('.location_stic');
const location_stickyAnchor = document.querySelector('.location_stic a');

const paragraph = (paraStyle) =>{
  location_stickyAnchor.appendChild(paraStyle);
  paraStyle.className = 'para';
  paraStyle.textContent = 'Find Us';
  paraStyle.style.transition = 'all 1s';
  paraStyle.style.position = 'absolute';
  paraStyle.style.left = '25px';
  paraStyle.style.opacity = '0';
  location_stickyAnchor.style.transition = ' all 1s';
  location_stickyAnchor.style.paddingRight = '15px';
}

paragraph(para);

location_sticky.addEventListener('mouseover', (e) =>{
  location_stickyAnchor.style.paddingRight = '60px';
  window.setTimeout(() =>{
  para.style.left = '35px';
  para.style.opacity = '1';
},1000);
});

location_sticky.addEventListener('mouseleave', (e) =>{
  para.style.opacity='0';
  para.style.left = '25px';
  window.setTimeout(() =>{
  location_stickyAnchor.style.paddingRight = '15px';
},500);
});

3 Answers

jhon white
jhon white
20,006 Points
jhon white
jhon white
20,006 Points

From what I gather, I think you need to assign the display of text in user element to none when the mouse leave. Hopefully , that was what you need. Good luck!!

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points

The video doesn't work

Jiten Mehta
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points
Jiten Mehta
.a{fill-rule:evenodd;}techdegree seal-36
Jiten Mehta
Front End Web Development Techdegree Graduate 21,209 Points

Hi Zimri, thanks for the reply. The video is working for me?

Hi jhon, thank you for the suggestion. I have added display block, and then display none to the respective mouse events, however, I am getting the same results.

Here is the link for the website, I should add this in initially, https://catalog.daher.co.uk/kitting-media/

Thanks for all the help!

Here is the updated JavaScript

const para = document.createElement('p');

const location_sticky = document.querySelector('.location_stic');
const location_stickyAnchor = document.querySelector('.location_stic a');

const paragraph = (paraStyle) =>{
  location_stickyAnchor.appendChild(paraStyle);
  paraStyle.style.transition = 'all 1s';
  paraStyle.className = 'para';
  paraStyle.textContent = 'Find Us';
  paraStyle.style.position = 'absolute';
  paraStyle.style.width= '100%';
  para.style.left = '0';
  paraStyle.style.opacity = '0';
  paraStyle.style.display = 'block';
  location_stickyAnchor.style.transition = ' all 1s';
  location_stickyAnchor.style.paddingRight = '15px';
}



location_sticky.addEventListener('mouseover', (e) =>{
  paragraph(para);
  location_stickyAnchor.style.paddingRight = '60px';
    window.setTimeout(() =>{
      para.style.left = '10px';
      para.style.opacity = '1';
    },500);
});

location_sticky.addEventListener('mouseleave', (e) =>{
  window.setTimeout(() =>{
    para.style.opacity = '0';
    para.style.left = '0';
    para.style.display = 'none;'
    },500);
  location_stickyAnchor.style.paddingRight = '15px';

});