с помощью JS задать стиль для a:hover

[Zippovich]

есть к примеру html:

<a href="#" id="hover">Hover</a>

Мне с помощью JS надо задать для этого <a> цвет при наведении, т.е. задать a:hover

на mootools могу задать для элемента цвет:

$('hover').setStyle('color', 'red');

но мне надо изменить цвет именно для :hover.

Подскажите, как это сделать.

P.S.: Кто-то знает можно ли с помощью javascript управлять не стилями какого-то элемента, а самими селекторами css, т.е. есть список селекторов, вот надо поменять свойства селектора a:hover

Edited July 1, 2009 by Zippovich

[AMD]

$('hover:hover').setStyle('color', 'red');

[Zippovich]

$('hover:hover').setStyle('color', 'red');

смешной вариант, но он не рабочий

[e1f]

А зачем именно на JS, css-псевдокласс :hover для ссылок уже отменили?

[Zippovich]

ну, ребята, поверьте, надо именно js.

пользователь выбирает цвет для a:hover из 255*255*255 значений, по onchange он должен в превьюшке уже работать.

[e1f]

ну тогда так (как на mootols не знаю, не пользовался)

var ah = document.getElementById('hover');
if (ah) {
	ah.onmouseover = function(){ this.style.backgroundColor = 'red' }
	ah.onmouseout = function(){ this.style.backgroundColor = 'white' }
}

[s0rr0w]

Копать в сторону CSSStyleSheet

[Styx]

<script type="text/javascript">
   var docStyles = document.styleSheets[0];
   if (docStyles.insertRule) {
	  docStyles.insertRule("#hover:hover {color: #0000FF;}", 0);
   } else {
	  docStyles.addRule("#hover:hover", "color: #0000FF", 0);
   }
   function setHoverColor(r, g, b) {
	  var hexClr = (r > 0xF) ? r.toString(16) : "0" + r.toString(16);
	  hexClr += (g > 0xF) ? g.toString(16) : "0" + g.toString(16);
	  hexClr += (b > 0xF) ? b.toString(16) : "0" + b.toString(16);
	  var docStyles = document.styleSheets[0];
	  if (docStyles.insertRule) {
		 docStyles.deleteRule(0);
		 docStyles.insertRule("#hover:hover {color: #" + hexClr + ";}", 0);
	  } else {
		 docStyles.removeRule(0);
		 docStyles.addRule("#hover:hover", "color: #" + hexClr, 0);
	  }
   }
</script>

Пример использования:

<form action="#" method="post">
   R: <input name="R" type="text" /><br />
   G: <input name="G" type="text" /><br />
   B: <input name="B" type="text" /><br />
   <input type="button" value="Set hover color" onclick="setHoverColor(parseInt(this.form.R.value), parseInt(this.form.G.value), parseInt(this.form.B.value));" />
</form>

P.S. Немного доработал. Предполагается, что стиль для #hover:hover изначально в CSS не значится.

Edited July 1, 2009 by Styx

[Zippovich]

Styx: огромное спасибо.