Как сделать чтобы блок появлялся при наведении?

Question

[KrotKrotKrotTest]

Подскажите, как сделать чтобы блок text появлялся при наведении на слайд и не скрывался? Проблема в том что блок должен быть через position absolute, чтобы при наведении область контента не разъезжалась.

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1
    <div class="text">text text text text text text text text text text text text text text text       text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
    </div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Comments

[Ankhena]

Начнем с того, что слайдер вообще не имеет отношения к вопросу.

как сделать чтобы блок text появлялся при наведении на слайд и не скрывался?

CSS так не умеет.
Значит, нужно, отлавливать наведение на JS и добавлять блоку .text класс, который его покажет. (гуглится элементарно).

Проблема в том что блок должен быть через position absolute

Уточните, что именно и какую создает проблему? Ну должен быть абсолютом - сделайте абсолютом.

Хотя, в современном мире для этого придумали гриды. Чтобы без лишних абсолютов.

Answer 1

[Sergey]

Вы еще код стилей не приложили.
Надо чтобы при наведении на ".swiper-slide" появлялся ".text", который внутри ".swiper-slide" и больше не исчезал? Тогда тут через javascript нужно класс добавлять для ".text" со стилями видимости. Или чтобы ".text" исчезал, как только мышка за границы ".swiper-slide" уходит? Просто через :hover достаточно. Что-то вроде такого:

.swiper-slide .text {display: none;}
.swiper-slide:hover .text {display: block;}

Это на вскидку. Возможно доработка нужна на реальном примере. Также можно не через display прятать, а через position, opacity, visible, clip и т.п... в зависимости от задач. Вообще такие примеры можете на Codepen делать и публиковать тут в вопросе, так быстрее и нагляднее вам ответить.