Султан-house на Электрозаводской, сауны москвы. Лучшие vip сауны москвы .

Пример

Мой пример использования эффекта наведения на блок.

Html

Код довольно прост, посколько IE поддерживает :hover только для ссылок, то вынужденный код такой:

<div id="links">

<ul>

<li><a href="#" mce_href="#" title="Text">Link Heading One

<em>Description of link.</em>

<span>Date posted</span></a></li>

<li><a href="#" mce_href="#" title="Text">Link Heading One

<em>Description of link.</em>

<span>Date posted</span></a></li>

</ul>

</div>

Тег <em> будем использовать для описания, а тег <span> для даты.

CSS

А теперь, для нормального отображения в IE, зададим ширину ссылок, равной ширине блока.

#links ul {

list-style-type: none;

width: 400px;

}

#links li {

border: 1px dotted #999;

border-width: 1px 0;

margin: 5px 0;

}

#links li a {

color: #990000;

display: block;

font: bold 120% Arial, Helvetica, sans-serif;

padding: 5px;

text-decoration: none;

}

* html #links li a {  /* make hover effect work in IE */

width: 400px;

}

#links li a:hover {

background: #ffffcc;

}

#links a em {

color: #333;

display: block;

font: normal 85% Verdana, Helvetica, sans-serif;

line-height: 125%;

}

#links a span {

color: #125F15;

font: normal 70% Verdana, Helvetica, sans-serif;

line-height: 150%;

}

Это не обязательно самый систематический способ разметки. Если кто-нибудь знает более семантический метод, отписываемся в комментариях.

Мой вольный перевод статьи: How to Create a Block Hover Effect for a List of Links