如何使用jquery处理悬停css样式和click事件

Question

处理悬停和点击事件的正确方法是什么，以便正确应用我的样式？我有一个面板列表，在悬停时将背景颜色更改为红色。问题出现了，因为我需要在单击面板时将背景颜色更改为红色。即使鼠标离开面板，此单击事件也需要保留。这可能吗？非常感谢

HTML

<div class="panel">
    ...
</div>
<div class="panel">
    ...
</div>
<div class="panel">
    ...
</div>

CSS

.panel {
    background-color: #fff;
}
.panel:hover {
    background-color: red;
}

点击活动

$('.panel').each(function () {
   $(this).click(function () {
     alert("clickedClass");
   });
});

更新

虽然我只想在一次将一个clickedClass应用于一个面板时点击所有面板，但这看起来像是一个'选中'选项。这可能吗？

$('.panel').click(function () {
    $(this).addClass('clickClass');
});

新CSS

.panel {
   background-color: #fff;
}
.panel:hover {
   background-color: red;
}
.clickedClass {
   background-color: red;
}

Answer 1

为了在离开选择时保持背景红色，你应该使用我会说的课程

使用Javascript：

$('.panel').each(function () {
   $(this).click(function () {
     $(this).addClass('redbg');
   });
});

CSS：

.panel {
    background-color: #fff;
}
.panel:hover {
    background-color: red;
}
.panel.redbg {
    background-color: red;
}

Answer 2

.css()

$('.panel').click(function () {
   $(this).css('background-color','red');
});

<小时/> 或者你可以.addClass()

Answer 3

我想我会在我的css中添加一个活动类：

.panel:hover, .active {
    background-color: red;
 }

并添加该课程onclick：

$('.panel').click(function () {
   $(this).addClass('active');
});

Answer 4

您可以使用addClass添加背景和兄弟（）以定位其他面板并删除活动类

$('.panel').click(function () {
    $(this).addClass('active').siblings('.panel').removeClass('active')
});

另请注意，您不必使用.each()遍历面板，只需直接委托给选择器。

DEMO