更改選擇的背景顏色懸停

Question

影像問題

我有那個選擇。 它是翻譯google的選擇，因此我無法修改結構（在div內是選擇）。 但是，我知道select（'.goog-te-combo'）的類別是什么：

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

當我將選項懸停在其他顏色上時，我想更改藍色。

我嘗試使用Select2或Chosen，但無法使其工作。 （也許是因為我不知道如何正確導入該庫）

完整代碼：

<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>

Answer 1

您可以使用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> 

Answer 2

您可以使用懸停偽類來更改背景顏色，並在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> 

Answer 3

在所有瀏覽器中都無法獲得理想的效果。

我建議您使用select的自定義實現，例如，看一下此解決方案:

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

為此，它使用<ul>和<li>元素。