Question

我已经用我的问题做了一个简单的例子，所以我想你更容易理解。我有几个div都有灰色，但是当你将它们悬停在其中一个上时，你会发现它们的颜色是真实的。如果我单击其中一个（并且单击了警报），它应该更改颜色，.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")});

}）

链接点击here

似乎悬停仍然有效，它会立即删除背景颜色。

提前致谢！

Answer 1

好吧，without too many changes to your code [重构]：

$(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;}

<强> JS

  $(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

可以大大简化代码

Working jsFiddle here

<强> 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;}

为了进一步简化，您可以从所有DIV中删除class="test"，并将悬停选择器更改为：

$('div').hover( etc etc

这不会干扰在同一个选择器集合上检测click事件。

Answer 4

这里有一个非常简单的解决方案：

LIVE DEMO

  $('.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

处理jQuery悬停行为

5 个答案: