使用javascript为div类设置悬停[重复]答案

【问题标题】：set hover for a div class using javascript [duplicate]使用javascript为div类设置悬停[重复]
【发布时间】：2020-05-17 02:11:57
【问题描述】：

我的 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"});
           }
        );

【问题讨论】：

$('div.optionClass')

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

$ 或jQuery function 让您可以传入一个选择器来选择要应用此功能的元素。您可以像编写 CSS 一样编写选择器，并在调用中使用它，即 $('.my-class').hover(...)。

【讨论】：