Блог

Главная - Вопросы по программированию - Как отобразить изображение рядом с текстом при наведении на него курсора мыши? Положение изображения должно изменяться в зависимости от длины текста

Как отобразить изображение рядом с текстом при наведении на него курсора мыши? Положение изображения должно изменяться в зависимости от длины текста

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать так, чтобы разные изображения отображались по ссылкам разного размера при наведении курсора мыши на ссылки. Точно так же, как на этой странице. Обратите внимание, что изображения отображаются рядом со ссылками, не перекрывая их. Есть ли способ сделать это автоматически или необходимо настроить ссылку по ссылке? До сих пор я мог сделать только это:

 .popup {
    position:relative;
    text-decoration:none;
}
.popup span {
    position:fixed;
    top:170px;
    width:350px;
    left:-999em;      
}
.popup:hover {visibility:visible}
.popup:hover span {left:800px;}
* html .popup span {position:absolute;}  
 <p><a class="popup" href="#">Ship 1<span><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817"></span></a> </p>

Ответ №1:

Вы можете сделать это с помощью display , но также position: absolute убедитесь, что не нарушаете структуру страницы:

ДЕМОНСТРАЦИЯ с изображением вне a ссылки (тот же эффект, что и ваша ссылка):

 .d-flex{
  display:flex;
}
.popup {
  display:block;
  text-decoration:none;
}
.popup   .popover-img {
  position: relative;
}
.popup   .popover-img img {
  display:none;
}

.popup:hover   .popover-img img {
  display:block;
  position:absolute;
}  
 <p class="d-flex">
  <a class="popup" href="#">Ship 1</a>
  <a class="popover-img" href="#">
    <img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
  </a>
  <span>Lorem Ipsum</span>
</p>

ДЕМОНСТРАЦИЯ с изображением в a ссылке

 .d-flex{
  display:flex;
}
.popup {
  display:block;
  text-decoration:none;
}
.popup .popover-img {
  position: relative;
}
.popup .popover-img img {
  display:none;
}

.popup:hover .popover-img img {
  display:block;
  position: absolute;
  top: 0;
  left: 0;
}  
 <p class="d-flex">
  <a class="popup" href="#">Ship 1 <span class="popover-img" href="#">
    <img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817">
  </span></a>
  
  <span>Lorem Ipsum</span>
</p>

Ответ №2:

У вас есть изображение внутри привязки. Переместите его наружу, прямо рядом со ссылкой, без пробела. Я думаю, что это должно работать нормально. Удалите интервал, если он вам не нужен.

 <p>
    <a class="popup" href="#">Ship 1</a><img src="https://c1.scryfall.com/file/scryfall-cards/large/front/e/5/e5dfd9fe-40d1-4902-a782-7dc18e72fcc4.jpg?1602129817"> 
</p>

Примечание: это должно решить проблему позиционирования, но не показывать (выскакивать) изображение, что должно быть другим вопросом.

Ответ №3:

Попробуйте этот css:

 .popup {
    position:relative;
    text-decoration:none;
}
.popup span {
    position: relative;     
}
.popup span img {
    display: none;
    position: absolute; 
    left: 100%;
    top: 0;
    width: 250px;
}
.popup:hover {visibility:visible}
.popup:hover span img {display: block}

Просто сделайте блок отображения изображения при наведении курсора мыши во всплывающем окне

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

1. Ваше решение также решило мою проблему. Большое вам спасибо!