更改选择的背景颜色悬停答案

【问题标题】：Change background color hover of select更改选择的背景颜色悬停
【发布时间】：2016-11-24 21:55:09
【问题描述】：

我有那个选择。是翻译google的select，所以不能修改结构（里面的div是select）。但是，我知道它的 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>

【问题讨论】：

很难理解问题和我想要什么
我刚刚编辑了我的帖子..抱歉英语不好

标签： javascript jquery select options

【解决方案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>

【讨论】：

我不能使用 div。我有标签选择和选项，我无法修改该结构
你不能使用 div，<div></div>?你的意思是不能把class加到div里？
再看我的第一篇文章。我无法修改该结构，因为我的代码中没有它。它是谷歌翻译的“内部结构”
我已经编辑了代码 sn-p 以包含 select2.js。我通过定位在悬停时应用的类来更改背景颜色。这是否更接近您想要解决的问题？
是的！只是它！但是在我的代码中不起作用..我不知道为什么..也许是因为我的代码类 goog-te-combo 中没有。我可以把我的代码发给你吗？给我发电子邮件：ligavirtualf1@gmail.com。请！！谢谢

【解决方案2】：

您可以使用hover伪类来改变背景颜色和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并尝试
您是否有一个运行代码的页面，以便我可以现场试用并建议您采取必要的措施。我创建的 sn-p 工作正常。也许您需要使 css 选择器更具体。
A.J 你的浏览器是什么？？我在任何地方都没有看到粉红色
我用的是ie11

【解决方案3】：

不可能在所有浏览器上都达到预期的效果。

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

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

它为此目的使用<ul> 和<li> 元素。

【讨论】：