如何控制悬停在 select2 tagbox 容器上

Question

当我将鼠标悬停在 select2 容器上时，它的边框变成红色。我希望能够使用 jquery 打开和关闭此功能。我整个上午都在寻找一种方法来做到这一点，但我现在已经瘫痪了我的大脑！有可能吗？非常感谢任何帮助。 Fiddle: http://jsfiddle.net/b5m7rnpw/

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js

<select id="dropList" style="width:300px" multiple="multiple">
<option value="Planet">Planet</option>
<option value="Earth">Earth</option>
</select>
<br>
<br>
<br>

<button  id='OnOffhover' class='buttonstyle' type="button">Click to turn red hover border On / Off</button>



$("#dropList").select2({ placeholder: "Select type", });  

$('#OnOffhover').on('click',function() {
    // some code
})




body {padding:30px;}

.buttonstyle{
width:260px;
height:20px;
}

.select2-container--default .select2-selection--multiple:hover { 
border: 1px solid red;
background-color: white;
cursor: pointer;
}

Answer 1

您可以使用 class 执行此操作，例如：

.hover:hover {
  border: 1px solid red;
}

然后 add/remove class 与 jQuery，使用 .addClass() and .removeClass() or .toggleClass()

例如： http://jsfiddle.net/b5m7rnpw/1/

如何控制悬停在 select2 tagbox 容器上

How control hover on select2 tagbox container

css

jquery

select2