Войти

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


Opium___
17-01-2011, 22:22
Извиняюсь заранее, если подобная темка уже была создана, но я ее не нашел.

Я толком не разбираюсь в вёрстке дивами, но возникла необходимость сделать это. Столкнулся с бредом ИЕ, что он не видит div:hover. Геморой конкретный скажу вам.
Я спросил как это можно реализовать без скриптов и т.п. Получил ответ, что можно это замутить с помощью onmouseover и т.п.

Я нашел как через onmouseover можно изменить фон блока, или же поставить на фон картинку. Но мне этого не достаточно, т.к. необходимо еще задать другой цвет шрифта.

Допустим есть два класса:

div.q1 {background:#000;}
div.1green {background:#222; color: #65ac50;}

Следовательно чтобы реализовать эти классы с помощью onmouseover мне предложили такой код (в последствии с моим редактированием):

<div class="line q1" onmousedown="this.className='1green';" onmouseout="this.className='line q1';">

Но почему-то это не работает. Правильно ли заданы классы, в этом случае, для объявления их в html и где здесь ошибка? И правильно ли они объявлены? В любом случае надеюсь увидить правильный код.

Просьба ссылками на левые ресурсы не закидывать и показать решение именно с этими стилями.

Sham
17-01-2011, 22:49
onmousedown - это нажата кнопка мыши вроде бы..чтобы реализовать эти классы с помощью onmouseover »ну и пишете onmouseover тогда...
{background:#000;} »
background-color (http://www.w3.org/TR/CSS2/colors.html#background-properties), хотя и так сойдет...

Opium___
17-01-2011, 22:59
onmouseover - мышь наведена. это нужно.

это я привел минимальный вариант класса. А класс примерно будет выглядеть вот так:

div.1green { background:url(''); background-color: #000; color: #65ac50; и возможно еще что то }

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

Sham
17-01-2011, 23:07
onmouseover - мышь наведена. это нужно. »
onmousedown="this.className='1green';" »
и где тут onmouseover

Opium___
17-01-2011, 23:16
упс))) извиняюсь)
так, вот что дальше. я изменил всё как необходимо, т.е. исправил эту позорную ошибку, но в итоге в ие работает, а опера\мозилла почему то нет. проверил на двух компах. что за хрень?

сейчас это выглядит так:

div.q1 {background:#000;}
div.1green {color: #65ac50; background-color:#222222;}


<div class="line q1" onmouseover="this.className='1green';" onmouseout="this.className='line q1';" id="monp">

Sham
17-01-2011, 23:41
единственное, что имя класса вроде должно начинаться с буквы1green »хотя и так должно работать...
можно еще hover добавить к div.1green (div.1green, #monp:hover {...})...

unders0n
22-01-2011, 11:44
я конечно не настаиваю но это можно реализовать при использовании jQuery в 3 строчки.(и вроде как везде работает)

будет выглядеть както так.

$(".selector").hover(function(){
$(this).toggleClass("action");
});

при наведении будет менять (вернее добавлять) класс .selector на .action

пример рассмотрен тут (http://anton.shevchuk.name/javascript/jquery-for-beginners/) как часть Выдвижной панели




© OSzone.net 2001-2012