更改背景颜色悬停的选择

问题描述：

我有那个选择。它是翻译谷歌的选择，所以我不能修改结构（内部div是选择）。但是，我知道它的类的选择（“.goog-TE-COMBO”）：

<div onclick="translate()" id="google_translate_element"></div>

我想改变蓝色，当我徘徊其他颜色的选择。

我尝试使用Select2或选择，但我不能让它工作。（也许是因为我不知道如何正确导入，图书馆）

全码：

<div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
    <div id=":0.targetLanguage"> 
    <select class="goog-te-combo"> 
     <option value="">Seleccionar idioma</option> 
     <option value="zh-CN">chino (simplificado)</option> 
     <option value="fr">francés</option> 
     <option value="en">inglés</option> 
     <option value="it">italiano</option> 
     <option value="vi">vietnamita</option> 
     </select> 
    </div> 
</div>

难以理解的问题，我想要什么 –

我刚刚编辑我的文章..对不起，英文 –

答

可以实现与CSS。

.select2-results__option--highlighted { 
 
     background-color: #BADA55 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
    <div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
 

 

 
    
 
    <div id=":0.targetLanguage"> 
 
    <select class="goog-te-combo"> 
 
     <option value="">Seleccionar idioma</option> 
 
     <option value="zh-CN">chino (simplificado)</option> 
 
     <option value="fr">francés</option> 
 
     <option value="en">inglés</option> 
 
     <option value="it">italiano</option> 
 
     <option value="vi">vietnamita</option> 
 
    </select> 
 
    </div> 
 
    </div> 
 

 

 
<script type="text/javascript"> 
 
$(".goog-te-combo").select2(); 
 
</script>

我不能使用div。我有标签选择和选项，我不能修改该结构 –

你不能使用divs，'

'？你的意思是说你不能在div中添加'class'？ –

再次看我的第一篇文章。我无法修改该结构，因为我没有在我的代码中使用它。其谷歌翻译的“内部结构” –

答

您可以使用悬停伪类来改变背景颜色和CSS样式后，将!important。

实施例段：

.goog-te-combo option:hover { 
 
    background: pink !important; 
 
}

<div class="skiptranslate goog-te-gadget" dir="ltr" style="font-size: 0px;"> 
 
    <div id=":0.targetLanguage"> 
 
    <select class="goog-te-combo"> 
 
     <option value="">Seleccionar idioma</option> 
 
     <option value="zh-CN">chino (simplificado)</option> 
 
     <option value="fr">francés</option> 
 
     <option value="en">inglés</option> 
 
     <option value="it">italiano</option> 
 
     <option value="vi">vietnamita</option> 
 
    </select> 
 
    </div> 
 
</div>

？没有作品。当我悬停时，背景是蓝色 –

为样式添加'！important'并尝试 –

没有工作..我必须使用Select2或选择我认为 –

答

这是不可能实现在所有浏览器所需的效果。

我建议你使用的选择自定义实现，例如看看这个解决方案:

https://codepen.io/wallaceerick/pen/ctsCz

它使用用于这一目的<ul>和<li>元素。

更改背景颜色悬停的选择

相关推荐