I need help with a mouseover event

MDN Learn
#1

A tutorial instructed me to copy paste the code below and expect the event listner to turn the Hellow World divs blue. Once I copied and pasted the code, the divs still don’t turn blue… Could someone help me understand why and how to make it so?

mouseover code

#2

Hi @ayanda! I’d be more than happy to check this out, but your codepen link doesn’t seem right — it just goes to a general new pen page. Can you try that one again?

Many thanks.

#3

Hey @chrisdavidmills ,

Super weird, here you go

mouseover code

#4

Perfect, that worked!

So there were two problems with the line inside your function

  • CSS property references inside JS are camel-cased, so “backgroundcolor” => “backgroundColor”
  • The color hex code needs a hash symbol in front of it to be valid, so “0000ff” => “#0000ff”

The updated line looks like this:

event.target.style.backgroundColor = "#0000ff";

This works, although:

  • Once moused over, the <div>s stay blue. To make them go back to green once you stop mousing over, you’ll need to use a corresponding mouseout event handler.
  • A better choice would be to use a hover event — you could handle both states unsing a single event handler with hover
  • Also bear in mind keyboard accessibility in such situations — you’ll need a focus event for making things happen when an element is focus via the keyboard (e.g. by tabbing)
  • Also bear in mind that you can’t tab to <div>s by default. To make a <div> tabbable, you’ll need a tabindex attribute.
1 Like
#5

Thanks a million!! Yeah, this tutorial I’m doing has had a lot of errors… but I’ve learned a whole lot more!