Change color of hover element?

Question

I want to change the background color on an element when I hover on it, but i won't work!?

$(document).ready(function(){
$(".walkingRoute-container").hover(function(){
    $("walkingRoute-container").css("background","#02baff");
  });
});

Preciate som help. Thanks!

Answer 1

You forgot the dot before the class name in the selector.

Use $(this) to target the element that is actually hovered, otherwise you will change the background of all elements with that class. You probably also want a function that removes the background when you leave the element:

$(document).ready(function(){
  $(".walkingRoute-container").hover(function(){
    $(this).css("background","#02baff");
  },function(){
    $(this).css("background","");
  });
});

Answer 2

Should there be a . before the class name inside the funcion?

Answer 3

$("walkingRoute-container").css("background","#02baff");

应该

$(".walkingRoute-container").css("background","#02baff");

Answer 4

I removed my answer about jQuery because mortenDelfi, Clyde Lobo, Guffa and 3nigma has already said everything. I only want to point out that maybe you may achieve what you need in pure CSS with no JavaScript using :hover selector like this:

.walkingRoute-container:hover { background-color: #02baff }

See DEMO .