.hover() and .click() don't work in conjunction with each other?

Probably a rookie mistake, but I can't seem to get t开发者_C百科he following to work;

$(document).ready( function() { 
  $("div.button_normal").hover(
     function() { $(this).removeClass("button_normal").addClass("button_hover"); },
     function() { $(this).removeClass("button_hover").addClass("button_normal"); }
    );  
  $("div.button_normal").click(
     function() { $(this).removeClass("button_normal") }
    )
});

If I pull out .hover(), it works fine, however, when .hover() is included, it overwrites .click().

Could anyone help me fix it up?

---

You're binding click via a class selector, but on hover, you're removing that class. Hence click is not firing.

You can use an id selector or add another class like button for example, that doesn't get removed on hover.