псевдоклассы и js

[BratKilla]

danik.js,
спасибо брат, теперь я всё понял! Я раньше думал, что hover'ом в js можно onmousemove заменить... остальные знания пойду в тематической статье добирать

[BratKilla]

danik.js,
Последний вопрос. Как в любом из этих примеров, с помощью js задать плавный переход цвета, к примеру в 0.5 секунды. Хотя бы ссылку на статью.

[danik.js]

css3:
transition: background-color 0.5s;

либо анимируй на js (хуже производительность, но лучше поддержка браузерами), используя requestAnimationFrame. Писать с нуля не советую. Лучше воспользуйся какой-нибудь готовой либой.

[kotamirov]

danik.js,
Неее. Но на этом примере точно поймёшь. Пусть всё так останется, но при наведении на левую половину div, background в div:hover будет red, а при наведении на правую - black.

т.е. было:
div:hover{
background: red;
}

стало:
div:hover{
background: black;
}

но изменение значения только с помощью js.

именно css файл ты не изменишь, хотя можно влезть в стиль сторонницы найти и переписать в style разделе то что тебе нужно и перезагрузить сторонницу )) но как то мрачно звучит ))!
если хочешь поменять стиль элемента, тогда как-то так можно попробовать !

css
.exchange_on_red:hover{
background: red;
}
.exchange_on_black:hover{
background: black;
}

js
var new_div = createElement('div');
new_div.id='id_new_div';
new_div.className='exchange_on_black';

ну и меняем по какому либо событию
var class = document.getElementById('id_new_div').className;
document.getElementById('id_new_div').className = class.replace(/exchange_on_black/g,' exchange_on_red');

[kotamirov]

css3:
transition: background-color 0.5s;

либо анимируй на js (хуже производительность, но лучше поддержка браузерами), используя requestAnimationFrame. Писать с нуля не советую. Лучше воспользуйся какой-нибудь готовой либой.

не 0.5s ,а .5s!
+ анимировать на css можно, затрат ресурсных меньше,
все что можно сделать на css лучше делать на css!
вот пример background loading:

/*part for loading processing*/
.loading_processing{
width:224px;
height:100px;
top:35%;
margin:0 auto 0 auto;
background:url('__BASE_URL__/i/loading_processing.png') no-repeat 0 0;
background-size: contain;
}
.loading_processing>div{
width:98px;
height:98px;
float:left;
background:url('__BASE_URL__/i/left_part_loading_processing.png') no-repeat 0 0;
background-size: cover;
-webkit-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
-o-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
-moz-animation:go_loading_processing 2s cubic-bezier(0, 0, 1, 1) infinite;
}
@-webkit-keyframes go_loading_processing{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes go_loading_processing{
0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}
}
@-0-keyframes go_loading_processing{
0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}
}
/*part for loading processing END*/

[danik.js]

не 0.5s ,а .5s!

Поясни пожалуйста, я не понимаю.

все что можно сделать на css лучше делать на css!

Как верстальщик со стажем, полностью поддерживаю
Можешь оформить пример через теги [html run] . Картинки можешь встроить через data:uri

[kotamirov]

Поясни пожалуйста, я не понимаю.Как верстальщик со стажем, полностью поддерживаю
Можешь оформить пример через теги [html run] . Картинки можешь встроить через data:uri

Значения в css которые меньше 0 можно и даже нужно писать без 0!

[danik.js]

Ну что можно - это я знаю. Но почему именно нужно?
Для меня привычней запись 0.5 нежели .5

[kotamirov]

Ну что можно - это я знаю. Но почему именно нужно?
Для меня привычней запись 0.5 нежели .5

чем меньше код тем, сам знаешь ))

[BratKilla]

Я вообще стараюсь все css свойства переносить в js, там их создавать, изменять. Тег style вообще не создаю... не уверен в правильности подхода, но мне больше нравится когда всё в одном месте. Не знаю правда, сейчас вообще кто-нибудь js отключает? а то крах и падение обеспечены моим стараниям