使用 JavaScript 为 div 类设置悬停

Question

我有看起来像这样的html：

<div class="optionClass">Option 1</div>
<div class="optionClass">Option 2</div>
<div class="optionClass">Option 3</div>

我正在尝试做的是让背景色成为用户定义的颜色，同时在悬停时更改div 背景颜色。由于颜色是用户定义的，因此无法使用 css 来控制背景颜色或悬停行为。希望找到一些可以应用于特定于"optionClass"的div的javascript。

我找到了jQuery代码，但它适用于所有div。有没有办法让它适用于特定的类？

$('div').hover(
function () {
$(this).css({"background-color":"red"});
}, 

function () {
$(this).css({"background-color":"blue"});
}
);

Answer 1

在jQuery 选择器中包含类名。

$('div.optionClass').hover(
function() {
$(this).css({
"background-color": "red"
});
},
function() {
$(this).css({
"background-color": "blue"
});
}
);

div {
background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Option X</div>
<div class="optionClass">Option 1</div>
<div class="optionClass">Option 2</div>
<div class="optionClass">Option 3</div>

Answer 2

$ 或 jQuery 函数允许您传入一个选择器来选择要应用此内容的元素。你可以编写一个选择器，就像你对CSS所做的那样，并在你的调用中使用它，即$('.my-class').hover(...).