Блог

Главная - Вопросы по программированию - Как я могу сделать слайд HTML-блока при наведении курсора мыши и показать текст под ним с помощью JS или CSS

Как я могу сделать слайд HTML-блока при наведении курсора мыши и показать текст под ним с помощью JS или CSS

#javascript #html #css #hover

#javascript #HTML #css #наведите курсор

Вопрос:

Я долго пытался сделать слайд HTML-блока при наведении курсора мыши и показать текст под ним с помощью CSS или JS. Я новичок в JavaScript, поэтому было бы здорово, если бы вы немного объяснили ответ, если это будет достигнуто с помощью JS.

Я искал много сайтов и спрашивал много людей, но я не смог этого добиться.

Я создал два раздела, один из которых находится под другим

Я попытался написать несколько примеров текста, но он появляется перед полем 

 .trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd; 
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
        }  
 <div class="trigger">
    <div class="box"></div>
</div>

Ответ №1:

Все, что вам нужно сделать, это добавить z-index :

 .trigger {
  width: 100px;
  height: 100px;
  border: 5px solid #999;
  background: #ddd; 
  position: relative;
}

.box {
  display: inline-block;
  background: pink;
  width: 100px;
  height: 100px;
  transition: transform 500ms ease-in-out;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.content {
  position: absolute;
  z-index: 1;
}

.trigger:hover .box {
  transform: translate(100px, 75px) rotate(40deg) ;
}  
 <div class="trigger">
    <div class="content">Content</div>
    <div class="box"></div>
</div>