связываемое изображение с текстом при наведении курсора - PullRequest
Новая
       7

связываемое изображение с текстом при наведении курсора

0 голосов
/ 27 июня 2018

Я хотел, чтобы это связываемое изображение имело текст во всплывающем окне (не тот тип всплывающего окна, который есть в w3schools, я хочу классический желтоватый прямоугольник) при наведении курсора мыши. Я пытался сделать это так 

<div class="folder1"> 
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>  
</div>

Открытие страницы в ссылке прекрасно работает, но при наведении на нее всплывающего окна нет. Любая помощь?

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

Вы можете сделать это просто с помощью CSS, или вы можете использовать одну из многих простых опций JavaScript «всплывающей подсказки». Например, Bootstrap имеет встроенную функцию всплывающей подсказки , готовую к использованию. Если вы хотите что-то базовое, вот простой подход только для CSS, который вы можете настроить под свои нужды: 

<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->    
<div class="folder1" style="padding: 200px;">
  <a href="yourlinkhere" target="_self" class="popper">
    <img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
    <span class="pop-up">This is some text I want to display.</span>
  </a>  
</div>

<style>
  a.popper {
    display: inline-block;
    position: relative;
  }

  .pop-up {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: 1rem 1.5rem;
    background: yellow;
    color: black;
  }

  a.popper:hover .pop-up,
  a.popper:focus .pop-up {
    display: block;
  }
</style>

По сути, вы позиционируете тег a относительно того, чтобы он мог иметь абсолютно позиционированные дочерние элементы, затем, опираясь на a:hover, вы показываете / скрываете дочерний элемент, используя свойство display дочернего элемента.

0 голосов
/ 27 июня 2018

Вы можете попробовать это, используя псевдоэлемент css 

a{
  position: relative;
}



a:hover:after{
  display:block;
  content: "This is some text I want to display";
  width: 200px;
  background: yellow;
  position: absolute;
  top:0;
  padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
0 голосов
/ 27 июня 2018

В настоящее время вы устанавливаете атрибут title, чтобы получить подсказку типа подсказки при наведении на элемент. Если это то, что вы хотите сделать, но, возможно, просто введите текстовое поле, скажем, желтым, я бы предложил использовать следующее: 

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data]:hover:after {
  content: attr(data);
  padding: 4px 8px;
  color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 2;
  border-radius: 5px ;
  background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>

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

<Ч />

Если с помощью 'popup' вы ищете предупреждение для пользователя, для закрытия которого требуется взаимодействие, вы можете использовать window.alert('text') в javascript вместе с обработчиком событий onmouseover. 

<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
<Ч />

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

function showDiv() {
  document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
  display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
...