处理jQuery悬停行为

我用我的问题做了一个简单的例子，所以我想你更容易理解。 我有一些

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() {
    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的：

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

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

---

下面是一个示例：，编辑后：

您可以通过使用类以及jQuery方法

.addClass

和

.removeClass

大大简化代码

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>

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

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

CSS:

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

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

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

---

为了进一步简化，您可以从所有div中删除

class=“test”

，并将悬停选择器更改为：

$('div').hover( etc etc

---

这不会影响在同一选择器集合上检测

单击事件。
这里有一个非常简单的解决方案：


拥有此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>

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>

JS

.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'));
    });
});

样品
因此，当单击div时，颜色应保持不变，即使另一个元素悬停在上方，直到单击另一个元素为止？最后单击的元素仍保持其颜色。所有其他div都像往常一样。好吧，如果方向正确，请使用
.mouseover（）
事件，因为它将保持css启动。当您悬停时，它同时包含mouseover和mouseoff事件。@supersize您需要一种方法来确定元素是否已被单击，并记住该设置，以便颜色可以“粘住”。您可以使用类来实现这一点。如果元素具有类“stick”，则不要更改悬停时的颜色。请参阅下面的示例。除了单击（使用css）直到下一次单击时才会保持颜色。@BradChristie我没有注意到需要它，我已经编辑了我的答案。谢谢您的努力。这正是我想要的。我知道所有css的可能性，但它不像我的示例中那么简单。如果我链接了我的原始代码，没有人会理解我的意思。无论如何，感谢上面的片段，解决了我的问题！这是一个示例代码段，它将保持颜色的状态。