更改背景顏色懸停的選擇

我有那個選擇。它是翻譯谷歌的選擇，所以我不能修改結構（內部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>

來源

2016-11-24 LigaVirtual F1

難以理解的問題，我想要什麼 –

我剛剛編輯我的文章..對不起，英文 –

可以實現與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>

來源

2016-11-24 22:02:18

我不能使用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>

來源

2016-11-24 22:18:34

？沒有作品。當我懸停時，背景是藍色 –

爲樣式添加'！important'並嘗試 –

沒有工作..我必須使用Select2或選擇我認爲 –

這是不可能實現在所有瀏覽器所需的效果。

我建議你使用的選擇自定義實現，例如看看這個解決方案:

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

它使用用於這一目的<ul>和<li>元素。

來源

2016-11-24 23:06:51 luke

更改背景顏色懸停的選擇

回答

相關問題