[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Изменить свойства элементов css JS
Форум PHP программистов > JavaScript
Xes
15.07.2011 - 21:11
ЕСть html

<div class='menubloc1_0' OnMouseOver="this.className='menubloc1_1'" OnMouseOut="this.className='menubloc1_0'">
<h3>Администратору</h3>

есть css
.menubloc1_0{
	background:url(../images/admin_0.png) no-repeat 0 0;
}
.menubloc1_1{
	background:url(../images/admin_1.png) no-repeat 0 0;
}

НУжно кроме как смены картинки в диве this. заменть слас для элемента
<h3>Администратору</h3> изменить цвет.
Я так понимаю надо задать id. <h3 id="id_1" clsss ="cl_1">Администратору</h3>

И при наведении на блок где идет обработак кроме смены фоновой картинки заменить класс для элемента id="id_1".
Помогите записать код, а то я синтаксис явы не знаю.
Само собой так не работает OnMouseOver="this.className='menubloc1_1'; id_1.className='k1'"



Спустя 29 минут, 3 секунды (15.07.2011 - 20:40) VolDroN написал(а):
в ксс есть такая вещь как hover, и не надо яваскрипт мучать.
.menubloc1{
background:url(../images/admin_0.png) no-repeat 0 0;
}
.menubloc1:hover{
background:url(../images/admin_1.png) no-repeat 0 0;
}

Спустя 11 минут, 50 секунд (15.07.2011 - 20:51) bodja написал(а):
Наверное потому что огород какой то в посте,
выражайтесь яснее. :D

з того что я понял,то стоит сделать вот так. 


<div class='menubloc1_0'>
<h3>Администратору</h3>


.menubloc1_0{
	background:url(../images/admin_0.png) no-repeat 0 0;
              color:#ffffff;
}
.menubloc1_0:hover {
	background:url(../images/admin_1.png) no-repeat 0 0;
              color:#000000;
}


ЗЫ Ну вот то темы появляются то исчезают :lol:

Спустя 2 минуты, 34 секунды (15.07.2011 - 20:54) Xes написал(а):
Цитата
в ксс есть такая вещь как hover, и не надо яваскрипт мучать.


Он действует на тот блок что наводишь у меня div в нем <h3> при наведении на div изменяеться фоновая картинка, но надо изменить еще свет текста в h3 поетому я думаю что надо изменить свойства для элемента <h3 id="id_1" clsss ="cl_1">

Спустя 1 минута, 42 секунды (15.07.2011 - 20:56) bodja написал(а):
Большими буквами

color:#000000;

Спустя 2 минуты, 2 секунды (15.07.2011 - 20:58) Xes написал(а):
bodja -- такая мысль была засунуть изменение света в общий блок наверное действительно на этом остановлюсь. Спасибо. Просто тагда для всего остального прийдеться какието свойства задавать чтобы другой текст неизменялся.
Ша попробую может и непонадобится лишнего ни чего писать.

Спустя 10 минут, 9 секунд (15.07.2011 - 21:08) Xes написал(а):
Работает только в Опере. IE and Mazila не работает (

Спустя 2 минуты, 46 секунд (15.07.2011 - 21:11) Xes написал(а):
Может тогда через ява подскажите как сделать.
Я так понимаю надо this заменить id_1 который мы присвоем <h3 id="id_1" clsss ="cl_1">
Только с синтаксисом подскажите для строки 
<div class='menubloc1_0' OnMouseOver="this.className='menubloc1_1'" OnMouseOut="this.className='menubloc1_0'">

Спустя 19 минут, 49 секунд (15.07.2011 - 21:31) Haotarez написал(а):

.menubloc1_0{
background:url(../images/admin_0.png) no-repeat 0 0;
}
.menubloc1_0:hover {
background:url(../images/admin_1.png) no-repeat 0 0;
}
.color-in{
color: green;
}
.color-out{
color: red;
}


<div class='menubloc1_0' OnMouseOver="document.getElementById('id_1').className='color-in'"  OnMouseOut="document.getElementById('id_1').className='color-out'">
<h3 id="id_1" class ="cl_1">Администратору</h3>
</div>

Спустя 6 минут, 54 секунды (15.07.2011 - 21:37) killer8080 написал(а):
а если так
<div class="menubloc">
<h3>Администратору</h3>

</div>



.menubloc{
	background:url(../images/admin_0.png) no-repeat 0 0;
}
.menubloc:hover{
	background:url(../images/admin_1.png) no-repeat 0 0;
}
.menubloc h3{
	color: #000;
}
.menubloc:hover h3{
	color: #F00;
}

Спустя 6 минут, 2 секунды (15.07.2011 - 21:43) Xes написал(а):
Проблема в том что hover не работает в ИЕ и Мазиле походу для блока.

Я пробовал писать так но не работает
Цитата
<div class='menubloc2_0' OnMouseOver="this.className='menubloc2_1'"  OnMouseOver="id_1.className='color-in'" OnMouseOut="this.className='menubloc2_0'">


Не работает надо писать чтото одно либо id либо this Походу прийдеться заморачиваться через функции если в одну строку нельзя записать два действия для события наведения курсора.
Пробовал через точку с запятой пробовал в фигурных скобках.

Haotarez - Кидани свой код в блокнот посмотри плиз в Мазиле работает у меня картинка не меняться цвет текста да прыгате с красного на зеленый.

Спустя 54 секунды (15.07.2011 - 21:44) Xes написал(а):
про мазилу на 100% не буду утверждать но читал буквально сегодня что ИЕ стопудово hover еолько для <a> воспринимает.

Спустя 1 минута, 39 секунд (15.07.2011 - 21:46) killer8080 написал(а):
Цитата (Xes @ 15.07.2011 - 21:43)
<div class='menubloc2_0' OnMouseOver="this.className='menubloc2_1'"OnMouseOver="id_1.className='col or-in'" OnMouseOut="this.className='menubloc2_0'">

так оно и не может работать wink.gif
а чем мой вариант не устраивает? Js кода в вёрстке нужно избегать!

Спустя 2 минуты, 10 секунд (15.07.2011 - 21:48) killer8080 написал(а):
Цитата (Xes @ 15.07.2011 - 21:44)
но читал буквально сегодня что ИЕ стопудово hover еолько для <a> воспринимает.

бред!!!

Спустя 30 секунд (15.07.2011 - 21:49) borovik написал(а):
у меня тоже вопрос
делаю анимацию css
есть параметр padding: 19px;
беру так 
func size(){
 div.style.padding -=1;
 settimeout("size()",50);
}

вопрос как сделать такую функцию для padding: 12px 20px;

Спустя 1 минута, 20 секунд (15.07.2011 - 21:50) Xes написал(а):
Цитата (killer8080 @ 15.07.2011 - 18:46)
а чем мой вариант не устраивает? Js кода в вёрстке нужно избегать!

НЕ поддерживаеться в Мазили и ИЕ в чем я шас уже сам убедился. Просто кинь свой код между тегами html body и открой в мазиле.
У меня только в опере работает причем все коды которые вы дали, работают в Опере.
НАдо как то объеденить два действия в одном событии, это реально можно зделать? Или надо по наведению мышки вызывать функцию которая и будит делать два этих действия.

НУ не знаю может у меня другая мозила и ИЕ.
У вас то работает?

Спустя 3 секунды (15.07.2011 - 21:50) Haotarez написал(а):
Лично я для аналогичных задач в 99% случаев использую jquery или javascript без фреймворков, т.к. слишком ценю свое время чтоб долго вдумываться как вколпачил css тот или иной барыга своего браузера в той или иной версии для того или иного устройства. Производительность сильно не страдает из-за 10 или даже 50 строк js которые работают с DOM подобным образом.

Спустя 1 минута, 41 секунда (15.07.2011 - 21:52) Haotarez написал(а):
Цитата
Я пробовал писать так но не работает
Цитата
<div class='menubloc2_0' OnMouseOver="this.className='menubloc2_1'"OnMouseOver="id_1.className='col or-in'" OnMouseOut="this.className='menubloc2_0'">


Я вам выше написал как правильно обратиться к id_1
У вас в блоке 2 обращения OnMouseOver - выполняется (что логично) только последнее. Для того чтоб выполнились обе инструкции их надо указать через ;

<div class='menubloc2_0' OnMouseOver="this.className='menubloc2_1';document.getElementById('id_1').classN ame='color-in'" OnMouseOut="this.className='menubloc2_0'">

Спустя 3 минуты, 15 секунд (15.07.2011 - 21:55) killer8080 написал(а):
Xes
проверил в FF3.6.18 и IE8 (IE7 под рукой нет к сожалению) всё работает!

Haotarez
JS нужно использовать по назначению, а вёрстку делать средствами css.

Спустя 2 минуты, 47 секунд (15.07.2011 - 21:58) Haotarez написал(а):
killer8080
У каждого свои методы. Кстати события при наведении, нажатии и т.д. - это уже не верстка - это события всё-таки.

Спустя 18 секунд (15.07.2011 - 21:58) Xes написал(а):
Цитата
Я вам выше написал как правильно обратиться к id_1

Само собой пробовал. Но как их в одну строку без функции записать? Пробывал и как вы показали тоже не работает. Так как я написал вполне работоспособно если убрать изменнеие кортинки а оставить только изменение цвета.
Проблема в том что надо запихнуть два действия в одно событие и ОЧЕНЬ желательно без функции.

Цитата
<div class='menubloc1_0' OnMouseOver="this.className='menubloc1_1'" OnMouseOver="document.getElementById('id_1').className='color-in'" OnMouseOut="this.className='menubloc1_0'">
      <h3 id="id_1" class="k1">Администратору</h3>

Не работает

<div class='menubloc1_0'  OnMouseOver="document.getElementById('id_1').className='color-in'" OnMouseOut="this.className='menubloc1_0'">
						<h3 id="id_1" class="k1">Администратору</h3>

Работает

Спустя 1 минута, 55 секунд (15.07.2011 - 22:00) Haotarez написал(а):
Цитата
Не работает

Перечитайте ещё раз моё сообщение : )

Спустя 1 минута, 30 секунд (15.07.2011 - 22:01) Xes написал(а):
Цитата (killer8080 @ 15.07.2011 - 18:55)
Xes
проверил в FF3.6.18 и IE8 (IE7 под рукой нет к сожалению) всё работает!

Haotarez
JS нужно использовать по назначению, а вёрстку делать средствами css.

Хрен тогда знает кидани сами файлы что ты здела на xes84@mail.ru ИЕ 8 Мазила 3.5 у меня попробую твои файлы запустить.

Спустя 1 минута, 13 секунд (15.07.2011 - 22:03) bodja написал(а):
Цитата (killer8080 @ 15.07.2011 - 18:48)
Цитата (Xes @ 15.07.2011 - 21:44)
но читал буквально сегодня что ИЕ стопудово hover еолько для <a> воспринимает.

бред!!!

Не бред wink.gif

Xes

Вообще не понятно,
я так понимаю это будет кнопка ?
Зачем тогда див.
<a> будет работать.

Спустя 1 минута, 38 секунд (15.07.2011 - 22:04) Xes написал(а):
Цитата
Перечитайте ещё раз моё сообщение : )

Я понеял вы изменяете цвет текста через ява а картинку через hover так вот у меня hover не работает!!!!!! Вото вчем проблема вот поэтому я тут и на городил уже кучу постов )))
Шас если killer8080 вышлет че у него есть заюзаю будет пояснее в чем причина.

Спустя 1 минута, 31 секунда (15.07.2011 - 22:06) Haotarez написал(а):
Xes
.menubloc1_0{
background:url(../images/admin_0.png) no-repeat 0 0;
}
.menubloc1_0:hover {
background:url(../images/admin_1.png) no-repeat 0 0;
}
.color-in{
color: green;
}
.color-out{
color: red;
}


<div class='menubloc1_0'  OnMouseOver="this.className='menubloc2_0';document.getElementById('id_1').className='color-in'" OnMouseOut="this.className='menubloc1_0';document.getElementById('id_1').className='color-out'">
						<h3 id="id_1" class="k1">Администратору</h3>

Спустя 1 минута, 6 секунд (15.07.2011 - 22:07) Xes написал(а):
Нет это не кнопка это блок меню. В котором само меню изменяеться фоновая картинка блока и надо изменить цыет названия меню. При этом эти действия производяться при наведенни на весь блок меню и продолжают работать даже когда мы тыкаем по пунктам меню у которых уже все ок зделано через hover так как это уже <a>

Спустя 20 секунд (15.07.2011 - 22:07) Haotarez написал(а):
Цитата
Я понеял вы изменяете цвет текста через ява а картинку через hover

Нет, я вам там дописал почему меняется текст, но не меняется картинка. В моем последнем примере меняется и по hover и по js - на выбор.

Спустя 3 минуты, 12 секунд (15.07.2011 - 22:10) Xes написал(а):
killer8080 Вышли на почту xes84@mail.ru свои файлы потестить.

Спустя 3 минуты, 36 секунд (15.07.2011 - 22:14) killer8080 написал(а):
Xes
да действительно в IE7 не работает :(
в остальных IE8, Opera11, Chrome12, Safari5.0.5, FF3.6.18 работает. Зачем на почту, вот код
Свернутый текст
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<meta name="author" content="xxxxx" />
<style type="text/css">
.menubloc{
	background:url(/images/logo.gif) no-repeat 0 0;
	padding: 50px;
	border: 1px solid red;
}
.menubloc:hover{
	background:url(/images/shapka_bg2.jpg) no-repeat 0 0;
}
.menubloc h3{
	color: #000;
}
.menubloc:hover h3{
	color: #F00;
}

</style>
	<title>Untitled 1</title>
</head>

<body>

<div class="menubloc">
<h3>Администратору</h3>

</div>

</body>
</html>

Спустя 2 минуты, 15 секунд (15.07.2011 - 22:16) Xes написал(а):
Haotarez - СПС вроди пашит. Шас все в порядок еще приведу убедюся и разберуся.

Спустя 9 минут, 40 секунд (15.07.2011 - 22:26) Xes написал(а):
Все пашет спасибо огромное. Значит я как то не так писал когда писал действия через точку с запятой.

Я так понимаю
псевдаклас вобщемто лишний и без него работает но можно оставить на случай если у кого ява не включина?
.menubloc1_0:hover {
background:url(../images/admin_1.png) no-repeat 0 0;
}

Спустя 1 минута, 51 секунда (15.07.2011 - 22:28) killer8080 написал(а):
Xes
но для оптимизации лучше объединить картинки в спрайт.

Спустя 2 минуты, 49 секунд (15.07.2011 - 22:31) Xes написал(а):
Я про спрайт только сегодня читал. Там помоему размер блока должен совпадать с картинкой чтобы только одна помещалась в блок а у меня картинка маленькая.

Спустя 4 минуты, 36 секунд (15.07.2011 - 22:35) Haotarez написал(а):
Xes
Цитата
Я так понимаю
псевдаклас вобщемто лишний и без него работает но можно оставить на случай если у кого ява не включина?

угу, можно убить
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.