处理jQuery的悬停行为(handle jQuery hover behavior)

我做了一个简单的例子，我的问题，所以我想这是比较容易让你了解。我有几个div S的都有一个灰色的，但是当你将鼠标悬停在其中的一个，你看他们得到他们的真实色彩。如果我点击其中一个（和它提醒点击）应该改变颜色和.hover()不应该在该元素上工作了，直到另外一个被点击。我坐在这里一小时，没有得到它的工作：

.test { background-color: #ccc;}
<div class="test" id="d1"></div>
<div class="test" id="d2"></div>
<div class="test" id="d3"></div>

和脚本：

$(function() {
$('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { $(this).css('background-color', '#CCC'); });

$('#d1').click(function() { $(this).css('background-color','#F00'); alert("clicked")});
$('#d2').click(function() { $(this).css('background-color','#F0F'); alert("clicked")});
$('#d3').click(function() { $(this).css('background-color','#00F'); alert("clicked")});

}）

对于链接点击这里

看来，悬停仍然有效，并立即删除背景颜色。

提前致谢！

Answer 1:

好了，没有太多改变你的代码 [重构]：

$(function() {
    var clickedId = '';

    $('#d1').hover(function() {
        $(this).css('background-color', '#F00'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });
    $('#d2').hover(function() { 
        $(this).css('background-color', '#F0F'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }     
    });
    $('#d3').hover(function() { 
        $(this).css('background-color', '#00F');
    }, function() {
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });

    $('#d1').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d2').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d3').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });

 })

变化：

使用一个变量来保存最后单击元素的ID
当你点击一个元素，存储单击元素的ID。另外，设置所有的元素（除非你点击一个），回到原来的背景色。
悬停时，检查是否失去悬停的元素是最后单击元素的ID（如果是，不改变它的背景背面）。

顺便说一句，我可能会使用CSS类和设置.active所点击的元素，并使用.test:hover 。但我认为这是学习的目的一个基本的JavaScript的例子。

如果你想看到一个与CSS： http://jsfiddle.net/MgTr4/1/

Answer 2:

HTML

<div class="test" data-selected-item="d1" id="d1"></div>
<div class="test" data-selected-item="d2" id="d2"></div>
<div class="test" data-selected-item="d3" id="d3"></div>

CSS

.test { margin-left: 50px; background-color:#CCC; height: 50px; width: 50px; float: left; margin-top: 50px; }
.d1 { background-color : #F00 !important;}
.d2{ background-color : #F0F !important;}
.d3 { background-color : #00F !important;}

  $(function() {
    $('.test').click(function() {
        $(this).hasClass($(this).data('selected-item')) ? $(this).removeClass($(this).data('selected-item')) : $(this).addClass($(this).data('selected-item'));
    });
});

样品http://jsfiddle.net/sheeban/gEftm/3/

Answer 3:

您可以通过使用类大大简化代码，以及jQuery方法.addClass和.removeClass

工作的jsfiddle这里

HTML：

<div class="test" id="d1" mycolor='#F00'></div>
<div class="test" id="d2" mycolor='#F0F'></div>
<div class="test" id="d3" mycolor='#00F'></div>

jQuery的/ JavaScript的：

$('.test').hover(
    function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', $(this).attr('mycolor') );
        }
    },function() {
        if ($(this).hasClass('stick') == false) {
            $(this).css('background-color', '#CCC');
        }
});
$('div').click(function() {
    $('div').removeClass('stick');
    $(this).addClass('stick');
});

CSS：

.test { background-color: #ccc;}
div{width:150px;height:80px;margin:5px;}

为了简化甚至更多，你可以删除class="test"从所有的DIV，并更改悬停选择器：

$('div').hover( etc etc

这不会检测到干扰click上选择的相同的收集事件。

Answer 4:

在这里，你去一个非常简单的解决方案：

现场演示

  $('.test').hover(function( e ){
    var hc = $(this).hasClass('test');
    $(this).css({ backgroundColor : (e.type=="mouseleave" && hc) ? '#ccc' :  $(this).data('c') });
  }).click(function(){
    $(this).toggleClass('test test2 ');
  });

具有这种HTML：

<div class="test" id="d1" data-c="#f00"></div>
<div class="test" id="d2" data-c="#f0f"></div>
<div class="test" id="d3" data-c="#00f"></div>

而这两个类中的CSS：

.test, .test2{

Answer 5:

这是更好地在这种情况下使用的CSS。 JavaScript解决方案更为复杂。你的情况，你可以更改代码的“悬停”块并将其更改为CSS规则：

#d1:hover { background-color: #F00; }
#d2:hover { background-color: #F0F; }
#d3:hover { background-color: #00F; }

下面是一个例子：的jsfiddle ，编辑后： jsFiddle2

文章来源: handle jQuery hover behavior