Не срабатывает opacity и visibility при focus

Question

.text-about__text_hidden {
    opacity: 0;
    transition: 0.5s;
}

.text-about__readmore:focus .text-about__text_hidden {
    opacity: 1;
}

<div class="text-about">
    <div class="text-about__text">
        Lorem ipsum dolor sit amet,<br />
        consectetur adipiscing elit.<br />
        Vestibulum ultrices fi......
    </div>
    <div class="text-about__readmore">Read More
        <div class="text-about__text text-about__text_hidden">
            erat, eget laoreet justo elementum<br />
            et. Integer id nisl nibh. Fusce lacinia<br />
            iaculis tortor et fringilla.
        </div>
    </div>
</div>

Мне нужно чтобы при фокусе на элемент "text-about__readmore" "Read More" исчезало, а вместо него показывался скрытый текст, таким образом как у меня не получается добится хотя бы появления текста при фокусировке

Answer 1

Все просто.

:focus применяется для выделения input'ов в форме в тот момент, когда им передано управления, то есть когда они выделены и на них стоит курсор.
Это не тот "фокус", о котором вы подумали.

А в вашем случае нужно использовать :hover
Он срабатывает когда курсор находится над объектом

.text-about__text_hidden {
    opacity: 0;
    transition: 0.5s;
}

.text-about__readmore:hover .text-about__text_hidden {
    opacity: 1;
}

<div class="text-about">
    <div class="text-about__text">
        Lorem ipsum dolor sit amet,<br />
        consectetur adipiscing elit.<br />
        Vestibulum ultrices fi......
    </div>
    <div class="text-about__readmore">Read More
        <div class="text-about__text text-about__text_hidden">
            erat, eget laoreet justo elementum<br />
            et. Integer id nisl nibh. Fusce lacinia<br />
            iaculis tortor et fringilla.
        </div>
    </div>
</div>

Answer 2

по умолчанию div-ы не фокусируются. Но если добавить тегу атрибут tabindex="-1", то всё получится.

.text-about__text_hidden {
  opacity: 0;
  transition: 0.5s;
}

.text-about__readmore:focus .text-about__text_hidden {
  opacity: 1;
}

<div class="text-about">
  <div class="text-about__text">
    Lorem ipsum dolor sit amet,<br /> consectetur adipiscing elit.<br /> Vestibulum ultrices fi......
  </div>
  <div class="text-about__readmore" tabindex="-1">Read More
    <div class="text-about__text text-about__text_hidden">
      erat, eget laoreet justo elementum<br /> et. Integer id nisl nibh. Fusce lacinia<br /> iaculis tortor et fringilla.</div>
  </div>
</div>

БЛОГ НА HUSL

Не срабатывает opacity и visibility при focus

Ответы (2 шт):