2

Интересует возможность имитации наведения :hover через input type="checkbox", помимо того, что через input можно изменить стили смежных элементов. То бишь, к примеру, есть изображение с секторами, при наведении на один из секторов - выводится определенная информация. Можно ли через checkbox показать сразу всю предыдущую информацию, посредством :hover? Или придется дописывать дубликаты-стили к каждому объекту?


В данном случае input фиксирует стили только смежных элементов и то, только по продублированным стилям. Можно ли, чтобы он фиксировал по :hover(для упрощения кода) и реально ли, чтобы также влиял на другие элементы(не смежные)? __

.show-areas:checked~.a1-box {
  background: rgba(128, 128, 128, 0.3);
}

.show-areas:checked~.a1-id {
  opacity: 1;
}

.ho:hover,
.ho:not(:hover) {
  transition: all .25s;
}

.a1-area {
  position: absolute;
  top: 0;
  left: 0;
}

.a1-area,
.a1-box {
  width: 231px;
  height: 231px;
  background: #333;
}

.a1-id {
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  height: 26px;
  padding-left: 7px;
  padding-top: 7px;
  width: 90%;
  font-size: 14px;
  opacity: 0;
  top: 185px;
}

.a1-area:hover .a1-box {
  background: rgba(128, 128, 128, 0.3);
}

.a1-area:hover .a1-id {
  opacity: 1;
}

.a2-area {
  position: absolute;
  top: 231px;
  left: 0;
}

.a2-area,
.a2-box {
  width: 231px;
  height: 231px;
  background: #222;
}

.a2-id {
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  height: 26px;
  padding-left: 7px;
  padding-top: 7px;
  width: 90%;
  font-size: 14px;
  opacity: 0;
  top: 185px;
}

.a2-area:hover .a2-box {
  background: rgba(128, 128, 128, 0.3);
}

.a2-area:hover .a2-id {
  opacity: 1;
}

.inp {
  position: fixed;
  right: 59%;
  top: 10%;
}

.lab {
  position: fixed;
  right: 50%;
  top: 10%;
}
<div class="a1-area">

  <input type="checkbox" class="show-areas inp" id="ch-areas" name="check-areas" />
  <label for="ch-areas" class="lab">Show areas</label>

  <div class="a1-box ho"></div>
  <div class="a1-id ho">A1</div>
</div>

<div class="a2-area">
  <div class="a2-box ho"></div>
  <div class="a2-id ho">A2</div>
</div>

7
  • Рабочий пример/попытку загрузи. 21 апр 2019 в 18:39
  • Добавил в основное сообщение.
    – Illia Mei
    21 апр 2019 в 19:20
  • слушай. Можешь лаконично сказать что ты в итоге хочешь? возможно я, если буду тут, дам альтернативное решение. но, ты простые вещи запутываешь. Надо стараться лаконичнее. Если есть пример, то покажи (имею в виду сторонний ресурс), или картинку нарисуй/схему того, что нужно. 21 апр 2019 в 19:42
  • Куда еще проще, тем более когда есть пример? Есть 21 элемент, при наведении чуть-чуть меняется фон и добавляется надпись. Нужно, чтобы через checkbox включался :hover абсолютно всех элементов и обратно. Что-то мне подсказывает, что на чистом CSS это не выполнимо: тут либо все элементы обертывать в один div, чтобы работал checkbox, либо оставлять как есть, дабы они выделялись сами по себе(первостепенно).
    – Illia Mei
    21 апр 2019 в 19:51
  • 1
    Дратути. Я знаю про правило "всегда лучше через CSS", но в текущих реалиях, если вы не пишете какой-нибудь сайт, где каждая миллисекунда на счету, всё должно быть максимально оптимизировано... то зачастую легче записать простенький скрипт, чем продумывать хитрую разметку под CSS... а если что-то в нем изменить, всё обрушится. Тут на всякий случай записал простейший пример на JS — jsfiddle.net/OPTlMUS/s4L9zomu , оно будет переключать независимо от вашей разметки (главное в CSS записать показывающий класс позже скрывающего - чтобы он был в приоритете) 21 апр 2019 в 21:31

1 ответ 1

2

Не понимаю - зачем вы усложнили себе работу создавая много классов, например: a1-area, a2-area и т.д. Когда можно упростить. Я чуть изменил вашу конструкцию. Но, её можно значительно упростить в плане сокращения написания стилей. И! не уверен правильно ли понял вашу задумку.

.show-areas:checked~.a1-box {
  background: rgba(128, 128, 128, 0.3);
}

.show-areas:checked~.a1-id {
  opacity: 1;
}

.ho:hover,
.ho:not(:hover) {
  transition: all .25s;
}

.a1-area {
  position: absolute;
  top: 0;
  left: 0;
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 231px;
  height: 231px;
  background: #333;
}

.a1-area,
.a1-box {
  width: 231px;
  height: 231px;
  background: #333;
}

.a1-id {
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  height: 26px;
  padding-left: 7px;
  padding-top: 7px;
  width: 90%;
  font-size: 14px;
  opacity: 0;
  top: 185px;
}

.a1-area:hover .a1-box {
  background: rgba(128, 128, 128, 0.3);
}

.a1-area:hover .a1-id {
  opacity: 1;
}

.a2-area {
  position: absolute;
  top: 231px;
  left: 0;
}

.a2-area,
.a2-box {
  width: 231px;
  height: 231px;
  background: #222;
}

.a2-id {
  color: #fff;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  height: 26px;
  padding-left: 7px;
  padding-top: 7px;
  width: 90%;
  font-size: 14px;
  opacity: 0;
  top: 185px;
}

.a2-area:hover .a2-box {
  background: rgba(128, 128, 128, 0.3);
}

.a2-area:hover .a2-id {
  opacity: 1;
}

.inp {
  position: fixed;
  right: 59%;
  top: 10%;
}

.lab {
  position: fixed;
  right: 50%;
  top: 10%;
}

.a1-area:hover .a1-box {
    background: rgba(128, 128, 128, 0.3);
}

#ch-areas:checked~.main .a1-box,
#ch-areas:checked~.main .a2-box {
    background: rgba(128, 128, 128, 0.3);
}
#ch-areas:checked~.main .a1-id,
#ch-areas:checked~.main .a2-id {
    opacity: 1;
}

.main22:hover .a1-box, .main22:hover .a2-box {
  background: rgba(128, 128, 128, 0.3);
}

.main22:hover .a1-id, .main22:hover .a2-id {
  opacity: 1;
}
<div class="main22">
  <input type="checkbox" class="show-areas inp" id="ch-areas" name="check-areas" />
  <label for="ch-areas" class="lab">Show areas</label>
<div class="main">


  <div class="a1-area">
    <div class="a1-box ho"></div>
    <div class="a1-id ho">A1</div>
  </div>

  <div class="a2-area">
    <div class="a2-box ho"></div>
    <div class="a2-id ho">A2</div>
  </div>
</div></div>

2
  • Спасибо, убрал последние два стиля, дабы при наведении на элемент включался :hover наведенного объекта, а не всех связанных и получилось, то что нужно.
    – Illia Mei
    21 апр 2019 в 21:19
  • @Illia Mei ну отлично. рад был помочь. я просто ориентировался по вашему коду. 21 апр 2019 в 21:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.