Master-X
Форум | Новости | Статьи
Главная » Форум » CJs » 
Тема: Hover на thumbs (подсветка рамкой): тут работающий css-код
цитата
31/03/07 в 12:20
 pns
Во многих постах цитируется css-код для подсветки тамб рамкой при наведении курсора мыши.
Этот цитируемый css-код неверный.

Вот этот фрагмент:
Код:
img.thumb {border: 1px solid #1color;}
img.thumb:hover {border: 1px solid #2color;}

Такой код не работает в эксплорере (проверялось на версии 6.х), но рисует рамку в опере (версия 9.x)


Правильный css-код выглядит так:
Код:
a.th       {
display: block;
width: 160px;
height: 200px;
border: 2px solid #771F00;}

a.th:hover    {  border: 2px solid #FE7F19;}


Значения полей:
  • width: 160px; -- ширина тамбы
  • height: 200px; -- высота тамбы
  • border: 2px solid #771F00; -- ширина, начертание и цвет и рамки


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


В html-коде тамбы с использованием такого стиля рисуются так:
Код:
<a title="..." class=th href="..."><img src="..." with=160 height=200 alt="..." border=0></a>
цитата
31/03/07 в 12:36
 Yoni
есть проще и нет привязки к элементу block и размеру тумб
цитата
31/03/07 в 12:41
 pns
пиши здесь, как будет проще, а не констатируй о другом варианте

я искал работающий способ, ты предлагаешь ещё и более простой: не вижу причин не пользоваться твоим
цитата
31/03/07 в 13:00
 Yoni
Код:

.highlight img {
   border: 5px solid #488EB3;
}

.highlight:hover img {
   border: 5px solid #FFFFFF;
}

.highlight:hover {
   color: #FFFFFF; /* Dumb definition for MSIE */
}


класс прописывается в тэг 'а'

p.s. значения бордера, цвета и пр., естественно, можно менять


Эта страница в полной версии