Change Element mouseover/mouseleave

Question

I’m trying to change the src of an element using the property attr in the mouseover and then on mouseleave. The idea is to change a banner while the mouse is under an element and update again after leaving.

I tried it two ways:

first

    $('.quartaImagem').mouseover(function () {
        $(".banner").attr("src", "Content/img/fotosHome/treinamentos.jpg");
    });
    $('.quartaImagem').mouseleave(function () {
        bannerDefault;
    });

2nd

    $(document).ready(function (e) {
        $('.quartaImagem').hover(function (e) {
            $(".banner").attr("src", "Content/img/fotosHome/treinamentos.jpg");
        }, function (e) {
            $(this).attr('src', bannerDefault);
        })
    });

Answer 1

You must do something like this:

var bannerDefault; // declara a variável no escopo global
$('.quartaImagem').hover(function (e) {
    bannerDefault = $(".banner").attr("src"); // memoriza o src atual
    $(".banner").attr("src", "Content/img/fotosHome/treinamentos.jpg"); // define novo src
}, function (e) {
    $(".banner").attr('src', bannerDefault); // define o src que estava antes
});

jsfiddle