如何控制在select2标记框容器上的悬停

Question

当我将鼠标悬停在其上时，我的select2容器的边框变为红色。我希望能够使用jquery打开和关闭此功能。我整个上午都在寻找一种方法来做到这一点，但我现在已经瘫痪了我的大脑！它甚至可能吗？ 任何帮助非常感谢。小提琴：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

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

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

然后使用.removeClass()和.toggleClass()或http://jsfiddle.net/b5m7rnpw/1/

添加/删除jQuery类

例如：