Question

I have a set of divs. They need to be olive when i hover and they need to stay red when clicked (They need to go back to white when red divs are clicked). I need to make the divs “selected” (introduce a new class called selected) when they are clicked.

The problem is that everything works fine but when i hover on a div just after it gets clicked, the hover still seems to have effect. Here’s my code

$(document).ready(function () {

    $("div.onemovie").not("select").hover(
  function () {
          $(this).css("background-color", "Olive");

  },
  function () {
          $(this).css("background-color", "White");
      }

  );
});

Click Code:

 $(document).ready(function () {
  $("div.onemovie").toggle(
  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "Red");
  },

  function () {
      $(this).toggleClass("select");
      $(this).css("background-color", "White");
  }
  );

});

Here’s a JS Fiddle link of my situation: http://jsfiddle.net/mNsfL/

Answer 1

Does this version do what you want?

http://jsfiddle.net/X7HbY/7/

I think you can accomplish what you want much more simply by using CSS for the hover effect.

Also, you shouldn’t have to set the background color back to white. When the rule no longer applies, the div will revert to its former settings.