Состояние наведения / фокусировки активируется изначально при загрузке страницы - PullRequest
Новая
       18

Состояние наведения / фокусировки активируется изначально при загрузке страницы

0 голосов
/ 08 мая 2019

У меня есть модуль, который показывает / скрывает содержимое при работе с состояниями при наведении или фокусировке.

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

Я пытался изолировать этот раздел с помощью CSS, используя .color:first-child - вы заметите красную рамку вокруг раздела, который я хотел бы развернуть при загрузке страницы в приведенном ниже коде.

https://codepen.io/ckatz/pen/XQaKdB

Может ли это быть выполнено исключительно в CSS, или нужно использовать JS или JQuery?

1 Ответ

2 голосов
/ 08 мая 2019

Вы можете создать «активный» класс с теми же стилями, что и классы наведения, и применить его только к первому, но он не будет удален при взаимодействии с модулем.Вы можете использовать селекторы одноуровневых элементов, чтобы перезаписать их , в то время как другие элементы div сфокусированы / наведены, но они вернутся, когда пользователь перейдет куда-то еще.В конечном счете вам понадобится JS, чтобы обнаружить, что что-то было перемещено / щелкнуто, и удалить стили навсегда. 

.color:hover, .color.active {
    /* Change the flex-basis so that we know what
    size to transition to on hover. Arbitrary,
    based on our design/content.
  */
    flex-basis: 20em;
}

.color:hover .details, .color.active .details {
    opacity: 1;
}

И какой-то JS, который обнаруживает наведение мыши для удаления класса, но вы можете использовать щелчки и / или что-то ещедругие события, которые вы считаете необходимыми: 

const module = document.getElementsByClassName('color-list')[0];
module.addEventListener('mouseover', function() {
  const firstBox = document.getElementsByClassName('light-brown-55')[0];
  firstBox.classList.remove('active');
})

Я сделал рабочую вилку здесь

...