javascript - 多个值的颜色转换器

Question

我有一个页面的现有颜色转换器，目前它将更改“背景颜色、颜色和 a:link”颜色。我正在尝试添加另一个字段以更改 a:hover 但由于某种原因我无法让它工作。我什至尝试过“元素列表:悬停”​​，因为这似乎是目前为其设置默认值的原因。

我尝试过使用与设置默认值相同的 css 标签，我也尝试过“a:hover”和“itemlist a:hover” ..

$('#select').change(function() {
  if ($(this).val() == 'Original') {
    $("body").css('background-color', '#FFFFFF');
    $("body").css('color', '#000000');
    $("a:link").css('color', '#0077EE');
    $("a:hover").css('background-color', '#D3D3D3');
    $("a:hover").css('color', '#000000');
    $(".listitem:hover").css('background-color', '#D3D3D3');
    $(".listitem:hover").css('color', '#000000');
  }
  if ($(this).val() == 'Desktop') {
    $("body").css('background-color', '#D3D3D3');
    $("body").css('color', '#000000');
    $("a:link").css('color', '#0000EE');
    $("a:hover").css('background-color', '#2A2B2A');
    $("a:hover").css('color', '#000000');
    $(".listitem:hover").css('background-color', '#2A2B2A');
    $(".listitem:hover").css('color', '#000000');
  }
  if ($(this).val() == 'Grey') {
    $("body").css('background-color', '#5B5E5B');
    $("body").css('color', '#C6DDF0');
    $("a:link").css('color', '#8CC06E');
    $("a:hover").css('background-color', '#000000');
    $("a:hover").css('color', '#FFFFFF');
    $(".listitem:hover").css('background-color', '#000000');
    $(".listitem:hover").css('color', '#FFFFFF');
  }
  if ($(this).val() == 'DarkGrey') {
    $("body").css('background-color', '#2A2B2A');
    $("body").css('color', '#C6DDF0');
    $("a:link").css('color', '#8CC06E');
    $("a:hover").css('background-color', '#000000');
    $("a:hover").css('color', '#FFFFFF');
    $(".listitem:hover").css('background-color', '#000000');
    $(".listitem:hover").css('color', '#FFFFFF');
  }
  if ($(this).val() == 'Terminal') {
    $("body").css('background-color', '#000000');
    $("body").css('color', '#7FFF00');
    $("a:link").css('color', '#7EC0EE');
    $("a:hover").css('background-color', '#FFFFFF');
    $("a:hover").css('color', '#000000');
    $(".listitem:hover").css('background-color', '#FFFFFF');
    $(".listitem:hover").css('color', '#000000');
  }
});

body {
  background-color: #FFFFFF;
  color: #000000;
}

a:link {
  color: #0000FF;
}

.links {
  min-width: 300px;
  max-width: 300px;
  float: left;
  margin-left: 10px;
}

.listitem {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 2.0;
  border-radius: 3px;
  width: 100%;
}

.listitem a {
  text-decoration: none;
  width: 100%;
}

.listitem a:hover {
  background: #FFFFFF;
  border: 1px solid black;
  font-size: 12px;
  line-height: 2.0;
  width: 100%;
}

.listitem:hover {
  background: #FFFFFF;
  border: 1px solid black;
  font-size: 12px;
  line-height: 2.0;
  width: 100%;
}

.form-group {
  margin-bottom: 3px;
}

.form-group>label {
  margin-bottom: 0;
  font-size: 12px;
}

ul,
li {
  list-style-type: none;
  list-style: none;
  padding: 0px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="list">
  <!-- Link_1 -->
  <div class="form-group">
    <a href="http://google.com/" id="input-lnk_link1" target="_blank">
      <li class="listitem">
        Link One</li>
    </a>
  </div>
  <!-- Link_2 -->
  <div class="form-group">
    <a href="http://yahoo.com/" id="input-lnk_link2" target="_blank">
      <li class="listitem">
        Link Two</li>
    </a>
  </div>
</div>
<div class="styles">
  <div class="stylechanger">
    <hr style="margin-left:0px;">
    <div class="col-xs-6">
      <select class="form-control input-sm height25" style="color:#000000; margin-left: -10px;" id="select">
        <option style="background-color:#FFFFFF; color:#000000" value="Original">Choose a Style (Default)
        </option>
        <option style="background-color:#D3D3D3; color:#000000" value="Desktop">Desktop
        </option>
        <option style="background-color:#5B5E5B; color:#C6DDF0" value="Grey">Grey
        </option>
        <option style="background-color:#2A2B2A; color:#C6DDF0" value="DarkGrey">Dark Grey
        </option>
        <option style="background-color:#000000; color:#7FD700" value="Terminal">Terminal
        </option>
      </select>
    </div>
  </div>
</div>

预期结果:我希望它在从下拉菜单中选择样式后更改背景、文本、链接、悬停链接和悬停背景颜色。

实际结果:目前，我只能在从下拉菜单中选择样式时更改背景、文本和链接颜色。

Answer 1

你可以试试

$(".listitem").on('hover', function() {
  $(this).css('background-color', '#000000');
});