Делаем эффект наведения на блок

Эффект наведения на какой либо блок (который будет являться ссылкой) сам по себе является достаточно интересным. Визуально данный пример выглядит так:

Поскольку HTML дает нам для осуществления связей только ":hover", а нам необходимо сделать ссылку "кликабельной" по периметру всего нашего списка, то мы обеспечим дополнительные связи с помощью <em> и <span> признаков.

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

Выгладит наш список примерно следующим образом:

HTML

<div id="links">

    <ul>

      <li><a href="#" title="Text">Заглавие ссылки один

        <em>Описание нашей ссылки.</em>

        <span>Дата размещения</span></a></li>

      <li><a href="#" title="Text"> Заглавие ссылки два

        <em> Описание нашей ссылки.</em>

        <span> Дата размещения</span></a></li>

    </ul>

  </div>

Теперь для эффекта наведения на блок нам необходимо сделать ширину ссылки равной ширине блока иначе эффект наведения будет только при наведении курсора на суму ссылку.

CSS

#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%;
}

28-05-08 16:05:13

pbyczsevg - 1-10-11 13:10:53

gqm32c rwyyfhgvcfpj, [url=http://nztnwrjkdfxg.com/]nztnwrjkdfxg[/url], [link=http://nsavupptzgcf.com/]nsavupptzgcf[/link], http://mnzuivdfwurw.com/

Samber - 8-05-11 19:05:46

Понравилось. Автору спс!

Саша - 28-02-11 12:02:57

Правила хорошего тона

Shrek - 26-03-10 09:03:00

Т.к. любое меню подразумевает список, а список это хорошо.

hachabala - 29-10-09 00:10:37

ээээмммм, извините, а зачем здесь вообще использовать список, если можно эти свойства:

border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;

прописать ссылкам? В итоге получится просто блок с ссылками без списка :)

Делаем эффект наведения на блок

Написать комментарий