помогите с "класс:hover {" [Версия для КПК] - Компьютерный форум OSzone.net

Показать полную графическую версию : помогите с "класс:hover {"

x0bbit

31-10-2005, 23:32

Знатоки помогите плз новичку.
У меня такая проблема. Имеется на странице некий блок, цвет которого надо изменить при наведении мышки.
В css файле написано у меня так:

.item {свойства}
.item:hover {свойства}

Собственно в коде страницы так <td class="item" width 15%>, но и с <div></div> я тоже эксперементировал...

Так вот в Фаерфоксе и в Опере все идеально работает, а вот Експлорере вообще не реагирует! (только форма курсора успешно меняется). В чем беда?

vadimiron

01-11-2005, 12:35

x0bbit
Да в ИЕ проблемы с этим, я могу предложить немного другое решение, но работающее во всех браузерах
Создаются два класса, например .item и .item-hover, в свойствах которого записываются соответственно, фон в нормальном состоянии и фон при наведении курсора мыши, а далее в нужно слое пишем так:

<div class='item'
onmouseover="this.className='item_hover';"
onmouseout="this.className='item';" >

elfoflorien

01-11-2005, 18:07

x0bbit, vadimiron
немного "левое" решение: вставить в блок (class="item") тэг <a href="#">, в который уже помещать содержимое и далее для ссылки написать: .item a:link {свойства} и .item a:hover {свойства}.
в принципе должно сработать...

vadimiron

01-11-2005, 21:32

elfoflorien
Не у меня так не получается :(, если вдруг у вас получится, интересно посмотреть на код

elfoflorien

01-11-2005, 23:45

vadimiron
примерно вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style>

.item a:link {text-decoration: none; color: blue;}
.item a:hover {text-decoration: line-through; color: red; }

</style>

</head>

<body>

<div class="item">
<a href="1.html#1">link 1</a><br>
<a href="2.html#2">link 2</a><br>
</div>

</body>
</html>

у меня вс прекрасно работает, IE6

x0bbit

02-11-2005, 08:45

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

Еще вопрос: IE обводит картинки (в случае если они являются ссылками) синей рамкой. Можно ли задать рамке свои цвета? Назначение цветов для а{ непомогло...

elfoflorien

02-11-2005, 11:34

x0bbit
конечно можно
во-первых, как предлагал vadimiron, то есть с помощью событий JavaScript, хотя я бы лучше написал специальную функцию для подсвечивания, мало-ли что еще менять придется...
во-вторых, лично я всегда убираю всякие рамки у картинок, т. к. на мой взгляд это некрасиво и существенно портит внешний вид странички... но это лично мое мнение

vadimiron

02-11-2005, 13:05

elfoflorien
Сенкс
Это способ работает только с тегом а. А если нам надо просто изменять цвет фона при наведении курсора (при этом этот блок не содержит ссылок), то это можно как то похожим образом сделать??

elfoflorien

03-11-2005, 12:40

vadimiron
похожим образом сделать
в смысле CSS? не знаю, не получилось
так что через javascript
<div style="width: 100; height: 20; background-color: blue; color: white; text-align: center" onmouseover="this.style.backgroundColor= 'red'" onmouseout="this.style.backgroundColor= 'blue'">
a text
</div>