CSS. Создаем всплывающий инфобокс

Другие статьи по теме:

В данной статье под инфобоксом будем понимать всплывающий блок, содержащий в себе информацию об элементе и возникающий как эффект MouseOver над данным элементом. Мы рассмотрим три варианта реализации инфобоксов. Все они демонстрируют применение лишь CSS и HTML без Javascript.

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

Однако, как это часто бывает при применении CSS следует учитывать поведение старых версий браузеров. Так третий вариант инфобокса работает в IE, начиная с 7 версии из-за применения псевдокласса :hover не к тегу A, а к DIV.

В первом случае в результате MouseOver-эффекта будет увеличиваться сам элемент, предоставляя дополнительную информацию о себе.

Посмотреть пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#infobox {
position:absolute; top:75px; left:75px;
z-index:3;}

#infobox a {
color:#ffffff;
background:#ccc;
font:bold 14px arial, sans-serif;
text-decoration:none;
display:block;
padding:10px;
border:1px dotted black;}

#infobox a:hover {
color:black;
background:#999;
width:350px;}

#infobox a span {display:none;}

#infobox a:hover span {
color:black;
background:#ccc;
font:normal 14px arial, sans-serif;
border:1px dotted black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>

<div id="infobox"><a href="#">Инфобокс<span>Здесь размещается дополнительная информация к инфобоксу.</span></a></div>

</body>
</html>

Пояснения:
В данном примере <div> получает ID infobox. ЭТо позволяет определить позицию и вид именно этого элемента. Он располагается абсолютно, что позволяет изъять его из общего потока документа.

С помощью селектора потомка #infobox a определяется стиль элемента <a> внутри infobox. А использование псевдокласса #infobox a:hover определяется MouseOver-эффект.

Для эффекта всплывания решающую роль имеет <span>-элемент. В обычном положении он имеет свойство display:none (см. #infobox a span), а при наведении указателя мыши срабатывает псевдокласс :hover.

Внимание:
В некоторых устаревших браузерах (IE4 и младше, Opera 6 и младше) псевдоклассы и селекторы потомков не поддерживаются, а потому всплывающий текст не появляется. Для того чтобы пользователи, использующие эти браузеры (что, конечно же, составляет незначительный процент от общей аудитории интернет-пользователей), могли увидеть скрытый текст, можно закрепить за словом "Инфобокс" ссылку на страницу с этим текстом.

Во втором примере дополнения к инфобоксу могут всплывают в любом другом месте страницы, независимо от местоположения самого инфобокса.

Посмотреть пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title>Инфобокс 2</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
}

#infobox a {
color:#fff;
background:#ccc;
font:bold 14px arial, sans-serif;
text-decoration:none;
display:block;
margin:50px;
width:100px;
padding:10px;
border:1px solid black;
text-align:center;}

#infobox a:hover {
color:black;
background:#999;}

#infobox a span {display:none;}

#infobox a:hover span {
position:absolute; top:50px; right:50px; z-index:3;
display:block;
width:300px;
color:black;
background:#fff;
font:normal 14px arial, sans-serif;
border:1px solid black;
padding:10px;
text-align:left;}
-->
</style>
</head>
<body>

<div id="infobox"><a href="#">Инфобокс<span>Здесь размещается дополнительная информация к инфобоксу.</span></a></div>

</body>
</html>

Пояснения:
В этом примере сам infobox позиционирован относительно и находится в потоке документа, а всплывающий блок позиционирован абсолютно.

Третий пример выглядит очень похожим на второй. Разница лишь в том, что псевдокласс :hover применен не к <a>-элементу, а к <div>.
Таким образом становится ясно, что MouseOver-эффект может быть вызван не только <a>-элементом, но и любым другим, в том числе и блок-элементом. Однако, псевдокласс :hover в отношении элементов, отличных от <a>, распознается лишь достаточно современными браузерами: к примеру, IE старше 6 версии.

Посмотреть пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
<title>Инфобокс 3</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
}

img {
border:none;
margin:0;
padding:0;
}

#infobox{
height:113px;
width:150px;
padding:0;
margin:50px;
border:1px solid black;
font:bold 14px arial, sans-serif;}

#infobox div{display:none;
margin:0;}

#infobox:hover div{
display:block;
width:350px;
position:absolute;top:50px;right:50px;
border:1px dotted black;
padding:15px;
font:normal 14px arial, sans-serif;}
-->
</style>
</head>
<body>

<p>Дни поздней осени бранят обыкновенно,<br>
Но мне она мила, читатель дорогой,<br>
Красою тихою, блистающей смиренно.<br>
Так нелюбимое дитя в семье родной<br>
К себе меня влечет. Сказать вам откровенно,<br>
Из годовых времен я рад лишь ей одной,<br>
В ней много доброго; любовник не тщеславный,<br>
Я нечто в ней нашел мечтою своенравной.</p>
<p style="text-align:right"><em>"Осень" А.С.Пушкин</em></p>

</div>
</div></body>
</html>

Главная

О нас

Услуги

Портфолио

Полезные статьи

Веб-дизайн

SEO

CMS

CSS

Партнеры

CSS. Создаем всплывающий инфобокс

Другие статьи по теме: