Question

我正在制作 select2 <div class="header"> <div class="navbar"> <a href="" class="in" style="display: inline-block;"> <svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve"> <path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6- 12.4-12.4c0-6.8,5.5-12.4,12.4-12.4 c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h- 21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6 v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2- 11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/> <g> <path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8- 0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120 L151.9,120z M151.3,119.6h-0.7v- 1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/> <path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7- 3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8 C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3- 3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3 C154.6,121.7,153.2,123.1,151.3,123.1z"/> </g> </svg> </a> <a href="" class="logo logocolorchng" style="display: inline- block;">Logo </a> <a id="toggle-menu"> <div> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> </a> </div> <div class="nav"> <div class="navigation"> <ul> <li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a></li> <li class="navlist"><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li> <li class="navlist"><a href="#wrapper" style="display: inline-block; width:100%;">Contact</a></li> </ul> </div> <div id="navpromo"> <ul> <li class="seemore">Want to see more? Check out my instagram!</li> </li> <div class='instbtn-cont'> <a class='instbtn' href='#'> Instagram <span class='line-1'></span> <span class='line-2'></span> <span class='line-3'></span> <span class='line-4'></span> </a> </div> </li> </ul> </div> </div> </div>，我想删除蓝色悬停样式，但我无法将其删除，不会退出。我该怎么做？请给我一个解决方案，谢谢 EXAMPLE

的js

combo box

查看

jQuery(document).ready(function($){
    $('select').select2({width:100});
    $('b[role="presentation"]').hide();
    $('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});

CSS

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

Answer 1

将以下内容添加到CSS代码中，因为导致蓝色悬停效果的代码位于缩小的css文件中，并且难以编辑：

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: lightgreen !important;
    color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: inherit;
}

Here is your updated JSFiddle

Answer 2

如果您只想从:hover上的元素中删除蓝色背景，则可以添加以下代码行：

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: inherit;
    color: inherit;
}

<强> DEMO

Answer 3

悬停用于此css，默认为background-color

html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}

<强> Demo

Answer 4

添加样式

.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}

无法清除组合框中的悬停颜色

4 个答案: