Блог

Главная - Вопросы по программированию - Добавить изображение в правый список элементов при наведении

Добавить изображение в правый список элементов при наведении

#html #css

#HTML #css

Вопрос:

У меня есть список элементов и изображение стрелки.

 <ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <div class="arrow">
      <img src="./assets/images/Arrow.svg">
   </div>
</ul>

Как я могу сделать так, чтобы изображение стрелки отображалось на правом элементе li при наведении.

Комментарии:

1. Вы пробовали что-нибудь? Кроме того, списки ( ol и ul ) могут содержать li только допустимые дочерние элементы, поэтому они div могут отображаться или не отображаться ожидаемым образом в зависимости от браузера.

2. Вы можете ввести li::before псевдоэлемент и сделать его видимым li:hover::before .

3. Спасибо за ваши ответы, ::before кажется интересным, я попробую. Не могли бы вы опубликовать его в качестве ответа, чтобы я мог проверить.

Ответ №1:

используется li:hover::after для добавления изображения при наведении.

 ul{
  list-style-type: none;
}

li{
  font-size: 34px;
  position: relative;
  width: max-content;
}

li:hover{
  cursor:pointer;
  font-size: 35px;
  transition: all 100ms ease-in;
}

li:hover::after{
  position:absolute;
  content: ">"; /* add url('img_url here') */
  left: calc(100%   10px);
}  
 <ul>
   <li>list option : A</li>
   <li>list option : B</li>
   <li>list option : C</li>
   <li>list option : D</li>
</ul>