ссылки наведения и активное изменение цвета в зависимости от положения мыши с помощью Javascript

Question

Я использую скрипт JS для изменения цветов фона div в зависимости от положения мыши.

$(document).mousemove(function(e){ 
    var $width = ($(document).width())/(252 - 23); 
    var $height = ($(document).height())/(253 - 2); 
    var $pageX = 253 - parseInt(e.pageX/$width,10); 
    var $pageY = 200 - parseInt(e.pageY/$height,10) + 2; 
     $("body").css("background-color", "rgb("+$pageY+","+$pageY+","+$pageY+")"); 
}); 

все работает отлично.

То, что я пытаюсь сделать сейчас, это применить те же изменения цвета к моим ссылкам при наведении и при активном действии.

при попытке этого кода, цветовые изменений на парении, в зависимости от положения курсора мыши, но когда MouseOut измененного цвета принадлежит:

$(document).mousemove(function(e){ 
var $width = ($(document).width())/(252 - 23); 
var $height = ($(document).height())/(253 - 2); 
var $pageX = 253 - parseInt(e.pageX/$width,10); 
var $pageY = 200 - parseInt(e.pageY/$height,10) + 2; 
    $("a:hover").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")"); 
    $("a:hover").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")"); 
    $("a:active").css("color", "rgb("+$pageX+","+$pageY+","+$pageX+")"); 
    $("a:active").css("border-bottom", "1px dotted rgb("+$pageX+","+$pageY+","+$pageX+")"); 

});

Я думаю, что нужно добавить наведения мыши и MouseOut функцию, но я не знаю, как это сделать ...

Кто-нибудь знает, как я могу это сделать?

вот jsfiddle: http://jsfiddle.net/BrZjJ/36/

Большое спасибо за вашу помощь

Answer 1

вам лучше использовать MouseLeave вместо отведении указателя мыши

$('a').mouseleave(function(e){ 
    $('a').css({'color':'#000', 'border':'none'}); 
}); 

Answer 2

Из-за некоторых изменений в приобретает важное скрипку, я буду ответьте здесь вместо того, чтобы оставить его в качестве комментария. Если я правильно понимаю, вы хотите, чтобы цвет ссылки изменился в зависимости от того, где вы двигаетесь по ней, и чтобы ссылка сохраняла этот цвет, когда вы нажимаете на него (или активируете его).

В этом jsFiddle он делает только что:

CSS

a.active { 
    border-bottom: 1px dotted; 
} 
a:visted { 
    color:blue; 
} 
a { 
    color: blue; 
    text-decoration: none; 
} 
a:hover { 
    border-bottom: 1px dotted; 
} 

JavaScript

var pageX, pageY; 

$(document).mousemove(function (e) { 
    var $width = ($(document).width())/(252 - 23); 
    var $height = ($(document).height())/(253 - 2); 
    var $pageX = 253 - parseInt(e.pageX/$width, 10); 
    var $pageY = 200 - parseInt(e.pageY/$height, 10) + 2; 
    $("body").css("background-color", "rgb(" + $pageY + "," + $pageY + "," + $pageY + ")"); 
}); 

$(document).mousemove(function (e) { 
    var $width = ($(document).width())/(252 - 23); 
    var $height = ($(document).height())/(253 - 2); 
    pageX = 253 - parseInt(e.pageX/$width, 10); 
    pageY = 200 - parseInt(e.pageY/$height, 10) + 2; 

    $("a").on("mousemove", function() { 
     $(this).css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")"); 
    }).on("mouseleave", function() { 
     if (!$(this).hasClass("active")) $(this).removeAttr("style"); 
    }); 

    $("a.active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")"); 
}); 

$("a").on("click", function() { 
    $("a").removeAttr("style").removeClass("active"); 
    $(this).addClass("active").css("color", "rgb(" + pageX + "," + pageY + "," + pageX + ")"); 
}); 

Edit: обновлены, чтобы изменить цвет активной ссылки на перемещение мыши.