Attaching both mouseenter and mouseleave event handlers using jQuery

Question

I'm a newbie to javascript, and day after day, I try to write better code with jQuery.

For example, I wrote this code earlier:

$$foo= $(".foo");

$$foo.mouseenter(function() {
    $(this).find('h1').addClass("hover");
});

$$foo.mouseleave(function() {
    $("h1").removeClass("hover");
});

What I want to happen with this code is when the mouse enters .foo the h1 gets a new background color or any style applying on class, hover.

Another example:

$$foo= $(".foo");

$$foo.mouseenter(function() {
    $(this).find('h1').addClass("hover");
    $(this).find('input').focus();
});

$$foo.mouseleave(function() {
    $("h1").removeClass("hover");
    $(".foo input").val('');
});

What I want to happen here is when the mouse enters .foo the input gets focus, and when mouse out the input's values are removed.

Both cases are working perfect, but I want to know if there is a better way to do this (mouse enter and mouse out)?

Answer 1

First of all you can use jQuery hover and passing 2 functions (mouseenter, mouseleave) and u can shorten it also with jQuery end

$('.foo').hover(
    function () {
        $(this).find('h1').addClass("hover").end().find('input').focus();            
    },
    function () {
        $(this).find('h1').removeClass("hover").end().find('input').val('');            
    }
);