根據鼠標位置將懸停和活動顏色更改鏈接到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+")");
}); 

它工作得很好。

我現在想做的是，當鼠標懸停和活動時，將相同的顏色更改應用於鏈接。

嘗試此代碼時，顏色會根據鼠標的位置在懸停時發生變化，但是當鼠標移出時，更改的顏色屬於：

$(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+")");

}）;

我想我需要添加一個mouseover和mouseout函數，但是我不知道該怎么做...

有人知道我該怎么做嗎？

這是一個jsfiddle： http : //jsfiddle.net/BrZjJ/36/

非常感謝你的幫助

Answer 1

您最好使用mouseleave而不是mouseout

$('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 + ")");
});

編輯：更新以更改移動鼠標上活動鏈接的顏色。