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

}）;

我想我需要添加鼠标悬停和鼠标输出功能，但我不知道该怎么做...

任何人都知道如何做到这一点？

这是一个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 + ")");
});

编辑：更新以更改移动鼠标上活动链接的颜色。

链接悬停和活动颜色更改取决于鼠标位置使用Javascript

2 个答案: