|
задать hover для элемента
Допустим есть элемент <a id="some">
Так вот возможно ли задать средствами JS ему :hover как этот в css #some:hover {color:#---} |
Конечно можно. Вот один из вариантов:
<?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>
|
ясно, значит нужно добавить стиль в Head
спасибо! |
<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>
|
Я сделал может и криво но по-своему :)
<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 элемента а вычислять в самой функции :) |
bushstas,
можно и без id <a onmouseover="hover(this,'c14141')" onmouseout="nohover()"> Наведи на меня </a> |
спасибо Skipp мне вот этот this пока с трудом дается оказывается все просто :)
|
bushstas,
В данном случае this передаёт ссылку на элемент <a> А вообще интересно, что этой функцией вы хотите сделать, вникать в код не хочется, суть в чём. Может что попроще подскажу. |
этой функцией я хочу изменять цвет шрифта элементов <a> при наведении на них, чтобы не прописывать в css для каждого hover, просто передовать цвет в функцию hover().
та узнает цвет текста до наведения из стиля, если не указан из стиля родителя и так далее вверх по дереву, запомнит, перекрасит текст в переданный цвет функция nohover() перекрасит текст обратно в цвет до наведения :) |
bushstas,
Похимичте с этим <a id="some" onmouseover="this.style.color='#c14141'" onmouseout="..."> Наведи на меня </a> |
| Часовой пояс GMT +3, время: 10:19. |
|