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

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - помогите с "класс:hover {" (http://forum.oszone.net/showthread.php?t=55967)

x0bbit

31-10-2005 23:32 369354

помогите с "класс:hover {"

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

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

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

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

vadimiron

01-11-2005 12:35 369479

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

HTML код:

<div class='item'

                onmouseover="this.className='item_hover';"

                onmouseout="this.className='item';" >

elfoflorien

01-11-2005 18:07 369576

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

vadimiron

01-11-2005 21:32 369631

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

elfoflorien

01-11-2005 23:45 369677

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

HTML код:

<!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 369736

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

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

elfoflorien

02-11-2005 11:34 369795

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

vadimiron

02-11-2005 13:05 369826

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

elfoflorien

03-11-2005 12:40 370071

vadimiron

Цитата:

похожим образом сделать

в смысле CSS? не знаю, не получилось
так что через javascript

HTML код:

<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>

Время: 05:08.