Color Changer для нескольких значений - PullRequest
Новая
       12

Color Changer для нескольких значений

0 голосов
/ 02 апреля 2019

У меня есть существующий сменщик цвета для страницы, в настоящее время он изменит цвета "background-color, color и 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>

Ожидаемые результаты: я хочу изменить цвет фона, текста, ссылки, ссылки при наведении курсора и цвета фона при выборе стиля из выпадающего менювниз меню.

Фактические результаты: в настоящее время я могу получить его только для изменения цвета фона, текста и ссылок при выборе стиля из выпадающего меню.

1 Ответ

0 голосов
/ 02 апреля 2019

Можно попробовать 

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