Question

我用javascript做了一个select并用数组填充了它的选项。之后我写了一些jquery来尝试在我将鼠标悬停在它上面时更改选项的backgroundColor，但似乎没有任何效果。每当我将鼠标悬停在选项上时，它们仍然会突出显示为蓝色。

我是javascript和jquery的新手，我知道为什么会发生这种情况：这可能是因为在选择中有一个标准的悬停功能，它总是会覆盖我的，或者我真的忽略了错误？因为我之前在div上测试了我的代码，代码就像这里的魅力一样

我的代码：

//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
    $('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}


$(".testoptions").hover(function(e) { 
    $(this).css("background-color",e.type === "mouseenter"?"green":"red") 
})

请注意是的我知道用css做这件事会更好但是我要求我只使用javascript和jquery来做这件事。

Answer 1

您可以使用select2并添加一些CSS来覆盖默认样式。

以下示例中包含一些可怕的颜色，以证明您可以覆盖默认的select2白色和蓝色。

＆＃13;

$("#states").select2();

＆＃13;

#states {
  width: 300px;
}

.select2-results__option {
  color: orange;
  background-color: seashell;
}

.select2-results__option--highlighted {
  color: white !important;
  background-color: darkgreen !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: darkgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<select id="states">
  <option value="">Select...</option>
  <option value="AZ">Arizona</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="NV">Nevada</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WV">West Virginia</option>
</select>

＆＃13;

将鼠标悬停在选项

1 个答案: