Question

我有一个页面的现有颜色更改器，当前它将更改“背景颜色，颜色和a：link”颜色。我试图添加另一个字段来更改a：hover，但是由于某种原因我无法使其工作。我什至尝试了“ itemlist：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');
});

多种颜色的换色器

1 个答案: