CODEWITHSUNDEEP
javascriptjqueryhovermousehovermouse-position
mmdwc
mmdwc

Reputation: 1137

links hover and active color change depending on mouse position with Javascript

I'm using a JS script to change div background colors depending of my mouse position.

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

it works perfectly fine.

what I'm trying to do now is to apply the same color changes to my links when hover and when active.

when trying this code, the color changes on hover, depending of the mouse position, but when mouseout the changed color belongs :

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

});

I think I need to add a mouseover and mouseout function but I don't know how to do this...

anyone know how I can do this ?

here is a jsfiddle : http://jsfiddle.net/BrZjJ/36/

thanks a lot for your help

Upvotes: 0

Views: 776

Answers (2)

ZiNNED
ZiNNED

Reputation: 2650

Because of some signifcant changes in the fiddle, I'll answer here instead of leaving it as a comment. If I understand you right, you want the color of the link to change depending on where you move over it and having the link keep that color when you click on it (or activate it).

In this jsFiddle it does just that:

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: updated to change color of active link on moving mouse.

Upvotes: 0

Nikita Holovach
Nikita Holovach

Reputation: 306

You better use mouseleave instead of mouseout

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

Upvotes: 0

Related Questions