鼠标悬停和鼠标悬停问题答案

【问题标题】：Mouseover and Mouseout issue鼠标悬停和鼠标悬停问题
【发布时间】：2012-12-19 11:47:06
【问题描述】：

所以我遇到了一个问题，因为我想从 DIV 背景中删除鼠标变成红色，这是可行的，但是当我在 div 内的标题上移动鼠标时，它已经发生了这个鼠标事件出去！我该怎么办？？

这里是代码：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'
    });
});

【问题讨论】：

抱歉，您只希望鼠标在 ola 上时背景变为红色？

标签： javascript jquery mouseover mouseout

【解决方案1】：

尝试绑定 mouseleave 事件

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

【讨论】：

【解决方案2】：

试试这个朋友

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

          });    
      });

在这里演示：http://jsfiddle.net/QZAXW/

【讨论】：

【解决方案3】：

你可以这样做：

Javascript

$(document).ready(function() {

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

});

Demo

虽然用一些 css 和这样的类来控制背景颜色可能会更好：

CSS

.imoveis.red {
    background: #cc0000;
}

Javascript

$(document).ready(function() {

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

});

Demo

【讨论】：