Создание текстового эффекта mouseover на основе CSS …

Хотите создать эффект mouseover без использования JavaScript? Что ж, это возможно. Эксперт по CSS Эрик Мейер (Eric Meyer) показывает, как это сделать, на своем сайтеCSS/Edge.

Прием очень простой, он основан на использовании свойства display, которое скрывает текст, а затем вызывает его появление в определенном месте при наведении указателя мыши.

Код:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»> 

<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>

<title>Создание эффекта mouseover при помощи CSS</title>

<style type=»text/css»>
<!—
html {
height : 100%;
}

body {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
font-size : 82%;
line-height : 135%;
font-family : Arial, sans-serif;
}

ul#links {
position: absolute;
top: 100px;
left: 25px;
width: 150px;
height: 300рх;
}

ul#links a {
display: block;
font-weight: bold;
text-align: center;
padding: 10px;
color: #0055ff;
border: 1px solid #000;
}

ul#links a:hover {
color: #ee0000;
}

ul#links a span {
display: none;
}

ul#links a:hover span {
display: block;
position: absolute;
top: 50px;
left: 225px;
width: 150px;
padding: 5px;
color: #fffeed;
background-color: #ed0000;
}

li {
list-style-type: none;
padding: 10px;
}
—>
</style>
</head>

<body>

<ul id=»links»>
<li><a href=»#»>Вода<span>Прозрачная бесцветная жидкость, представляющая собой в чистом виде химическое соединение водорода и кислорода</span></a></li>
<li><a href=»#»>Огонь<span>Свет от осветительных приборов. Огни фанарей. Огни города.</span></a></li>
<li><a href=»#»>Ветер<span>Держать нос по ветру</span></a></li>
<li><a href=»#»>Земля<span>Третья от Солнца планета, вращающаяся вокруг своей оси и вокруг Солнца</span></a></li>
</ul>

</body>
</html>

(рис. 1). Создание эффекта mouseover при помощи CSS.

Вы можете добавить дополнительную выразительность вашим ссылкам, и они будут ярче. Либо можете создать вертикальную или горизонтальную навигацию на основе списка, как я описывал в статье навигационные CSS-панели на основе списков, и применить к ней данную технику.

Текстовый эффект mouseover, созданный при помощи CSS, хорошо работает в современных браузерах.

CSS-эффект mouseover для текста с изображениями …

Можно применять подобную технику замены и к изображениям. В данном случае элемент изображения помещается непосредственно в элемент anchor и, вместо использования элемента display для скрытия и отображения, необходимо установить нулевую высоту и ширину до наступления состояния :hover (наведение указателя мыши), на время которого вы включите высоту и ширину.

Код:
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»> 

<head>
<meta http-equiv=»content-type» content=»text/html; charset=windows-1251″>

<title>CSS-эффект mouseover с использованием изображений</title>

<style type=»text/css»>
<!—
html {
height : 100%;
}

body {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
font-size : 82%;
line-height : 135%;
font-family : Arial, sans-serif;
}

ul#links {
position: absolute;
top: 100px;
left: 25px;
width: 150px;
height: 300рх;
}

ul#links a {
display: block;
font-weight: bold;
text-align: center;
padding: 10px;
color: #0055ff;
border: 1px solid #000;
}

ul#links a:hover {
color: #ee0000;
}

ul#links a img {
width: 0;
height: 0;
border-width: 0;
}

ul#links a:hover img {
position: absolute;
top: 15px;
left: 225px;
width: 259px;
height: 195px;
}

li {
list-style-type: none;
padding: 10px;
}
—>
</style>
</head>

<body>

<ul id=»links»>
<li><a href=»#»>ФГУП «НИИСК»<img src=»niisk_spb.jpg» /></a></li>
<li><a href=»#»>БЧК<img src=»bm_bchk.jpg» /></a></li>
<li><a href=»#»>ТЕКСТИЛЬ-ОПТ<img src=»textile_opt.jpg» /></a></li>
</ul>

</body>
</html>

(рис. 2). CSS-эффект mouseover с использованием изображений.

Динамические CSS-меню …

Этот прием представляет собой расширенное использование идей создания эффекта mouseover при помощи CSS, но здесь псевдокласс :hover применяется к другим элементам — на самом деле, это использование :hover допустимо, но, к сожалению, IE не поддерживает его. В результате у вас есть доступ только к основным ссылкам.

Таким образом, можете использовать этот эффект для создания отличных меню без JavaScript, но в IE они работать не будут. Кроме того, поскольку фактически вы просто оформляете списки, в браузере без CSS-поддержки, такие динамические меню будут выглядеть, как сложные списки.

 

внимание! Более подробную информацию об эффекте mouseover и приемах для оформления меню, описанных здесь, вы найдете на сайте CSS/Edge Эрика Мейера. Подробное описание создания иерархических динамических меню вы можете также найти на сайте www.pixy.cz в статье: Hierarchical dynamic menu with CSS. 


Оригинальная статья взята с сайта www.seo-copywrite.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *