Форум

bushstas · #1 (**permalink**) 17.06.2010, 10:54

Допустим есть элемент <a id="some">
Так вот возможно ли задать средствами JS ему :hover
как этот в css
#some:hover {color:#---}

chippolino · #2 (**permalink**) 17.06.2010, 11:36

Конечно можно. Вот один из вариантов:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><title>New</title>
<script type="text/javascript">

window.onload = function(){
	
	var style = document.createElement('style');
	style.type = 'text/css';
	
	var h = '#some:hover{color:#f00}';
	var hover = document.createTextNode(h);

	var head = document.getElementsByTagName('head')[0];

	style.appendChild(hover);
	head.appendChild(style);
		
}

</script>
</head><body>

<h1><a id="some" href="#">test</a></h1>
 
</body></html>

bushstas · #3 (**permalink**) 17.06.2010, 11:42

ясно, значит нужно добавить стиль в Head
спасибо!

chippolino · #4 (**permalink**) 17.06.2010, 12:16

<script type="text/javascript">
//можно сымитировать :hover c помощью событий onmouseover и onmouseout
window.onload = function(){

	var some = document.getElementById('some');
	some.style.color = 'lightblue';//задаем цвет по умолчанию
	some.onmouseover = function(){
		some.style.color = '#f00';
	}
	some.onmouseout = function(){
		some.style.color = 'lightblue';
	}
}

</script>

bushstas · #5 (**permalink**) 17.06.2010, 12:39

Я сделал может и криво но по-своему

<a id="some" onmouseover="hover('some','c14141')" onmouseout="nohover()"> Наведи на меня </a>

function hover(id,c){
// узнаем цвет до наведения и запоминаем
var color=document.getElementById(id).style.color;
if (color=="unfefined" || color==""){
var par=document.getElementById(id)
while(color=="undefined"  || color==""){par=par.parentNode; color=par.style.color}
colorBefore=color}
else {colorBefore=color}
document.getElementById(id).style.color="#"+c
Hovered=id
}
function nohover(){
if (colorBefore==""){colorBefore="#000000"}
document.getElementById(Hovered).style.color=colorBefore
Hovered=""
}

тока если ни у одного из родителей не будет задан в стилях color будет плохо

еще бы улучшить чтобы не передовать id элемента а вычислять в самой функции

Skipp · #6 (**permalink**) 17.06.2010, 12:43

bushstas,
можно и без id

<a onmouseover="hover(this,'c14141')"  onmouseout="nohover()"> Наведи на меня </a>

bushstas · #7 (**permalink**) 17.06.2010, 12:48

спасибо Skipp мне вот этот this пока с трудом дается оказывается все просто

Skipp · #8 (**permalink**) 17.06.2010, 12:51

bushstas,
В данном случае this передаёт ссылку на элемент <a>

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

bushstas · #9 (**permalink**) 17.06.2010, 12:57

этой функцией я хочу изменять цвет шрифта элементов <a> при наведении на них, чтобы не прописывать в css для каждого hover, просто передовать цвет в функцию hover().
та узнает цвет текста до наведения из стиля, если не указан из стиля родителя и так далее вверх по дереву, запомнит, перекрасит текст в переданный цвет

функция nohover() перекрасит текст обратно в цвет до наведения

Skipp · #10 (**permalink**) 17.06.2010, 13:03

bushstas,
Похимичте с этим
<a id="some" onmouseover="this.style.color='#c14141'" onmouseout="..."> Наведи на меня </a>

Форум

Справочник

Discord чат

Курсы javascript