Mouseover and Mouseout issue

Question

So I'm having a problem because I would like to remove the mouse from the DIV background turns red, this is working, but when I move the mouse on the title that is inside the div, it already happens this mouse event out! What am I suposed to do ??

Here is the code: http://jsfiddle.net/eluminium/t5YEC/1/

var $imoveis = $('.imoveis');
$imoveis.mouseover(function() {
    var index = $(this).index();
});

$imoveis.mouseout(function() {
    var index = $(this).index();
    $imoveis.eq(index).css({
        background: 'red'
    });
})​;​

Answer 1

Try binding the mouseleave event

function imoveis(){
    var $imoveis = $('.imoveis');

    $imoveis.mouseover(function(){
        var index = $(this).index();
    });

    $imoveis.mouseleave(function(){
        var index = $(this).index();

        $imoveis.eq(index).css({
            background: 'red'
        });
     });
}

Demo

Documentation

Answer 2

Try this mate

 $(document).ready(function(){
          $('.imoveis').hover(function () {
              var index = $(this).index();
          }, function () {
            var index = $(this).index();
                $('.imoveis').eq(index).css({background: 'red'});

          });    
      });

Demo here: http://jsfiddle.net/QZAXW/

Answer 3

You could just do this:

Javascript

$(document).ready(function() {

    $('.imoveis').on('mouseleave', function() {
        $(this).css({
            background: 'red'
        });
    });

});

Demo

Although it would probably be better to control the background colour with some css and a class like so:

CSS

.imoveis.red {
    background: #cc0000;
}

Javascript

$(document).ready(function() {

    $('.imoveis').on('mouseenter', function() {
        $(this).removeClass('red');
    });
    $('.imoveis').on('mouseleave', function() {
        $(this).addClass('red');
    });

});

Demo