<!DOCTYPE html>
<html>
<head>
</head>
<body>
Вот какой-то
<span class="text">текст
<div class="hint">
Подсказка C текстом и картинками
<img src="http://forum.df2.ru/uploads/av-2928.jpg" />
</div>
</span>, если навести на слово написанное красным - то появится подсказка.
<p>Что-то, что идет под тектом.</p>
<style>
.text{
position: relative;
cursor: help;
color: red;
}
.hint{
display: none;
padding: 10px;
border: 1px solid green;
position: absolute;
top: 100%; left: 0px;
margin-top: 10px;
width: 300px;
max-width: 300px;
background: white;
border-radius: 20px;
color: blue;
}
.text:hover .hint{
display:block;
}
</style>
</body>
</html>
<html>
<head>
</head>
<body>
Вот какой-то
<span class="text">текст
<div class="hint">
Подсказка C текстом и картинками
<img src="http://forum.df2.ru/uploads/av-2928.jpg" />
</div>
</span>, если навести на слово написанное красным - то появится подсказка.
<p>Что-то, что идет под тектом.</p>
<style>
.text{
position: relative;
cursor: help;
color: red;
}
.hint{
display: none;
padding: 10px;
border: 1px solid green;
position: absolute;
top: 100%; left: 0px;
margin-top: 10px;
width: 300px;
max-width: 300px;
background: white;
border-radius: 20px;
color: blue;
}
.text:hover .hint{
display:block;
}
</style>
</body>
</html>
Комментариев нет:
Отправить комментарий