Наведите указатель мыши на div, посмотрите текст

Question

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

Код:

<a href="../profile.php"> 
    <img src="../img/profile.png" style="border: gray 1px solid; margin-left: 0px; width: 45px;" /> 
</a> 
<a href="../shop.php"> 
    <img src="../img/shop.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" /> 
</a> 
<a href="../settings.php"> 
    <img src="../img/indstillinger.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" /> 
</a> 
<a href="../casino.php"> 
    <img src="../img/casino.png" style="border: gray 1px solid; margin-left: 10px; width: 45px;" /> 
</a> 

Answer 1

Рассмотрим title="my tooltip" атрибут.

Answer 2

Лучший способ сделать это что-то вроде этого:

<a href="../profile.php"><img src="../img/profile.png" title="Here comes hover text" style="border: gray 1px solid; margin-left: 0px; width: 45px;"/></a> 

Answer 3

Попробуйте это: Добавить <p> элемент после того, как каждый из ваших <img> теги:

<p class="popup">Caption goes here</p> 

Затем с CSSvisibility недвижимости вы можете показать/скрыть заголовок:

a { 
    display:inline-block; 
} 

img { 
    border: 1px solid #aaa; 
} 

.popup { 
    visibility: hidden; 
    text-align: center; 
} 

a:hover .popup { 
    visibility: visible; 
} 

Example.