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

Question

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

I've updated your [fiddle](http://jsfiddle.net/BrZjJ/38/). You should should be using mousemove and mouseleave functions. — ZiNNED, Feb 07 '14 at 14:05
thanks @ZiNNED, but what about the active class ? when clicking the color changes because of the hover, but the active class need to change color, and that the color changes depending of the mouse position... do you see what I mean ? — mmdwc, Feb 07 '14 at 15:15

score 0 · Answer 1 · answered Feb 07 '14 at 14:19

0

You better use mouseleave instead of mouseout

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

answered Feb 07 '14 at 14:19

Nikita Holovach

306
1
7

ZiNNED · Answer 2 · 2014-02-07T15:49:03.720

0

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.

edited Feb 07 '14 at 15:49

answered Feb 07 '14 at 15:32

ZiNNED

2,620
20
31

thanks again @ZINNED, but I think we missunderstood... when link class is active, I want it to change color depending of the mouse position, and when me move the mouse, the active link color keep changing... so a (color: black for example), a:hover (the color depending of the mouse position), a:active (change color depening of the mouse position, and when moving the mouse the active color keep changing depending of the JS code... you see ? – mmdwc Feb 07 '14 at 15:45
@user2882154 I've updated the fiddle again. Now an active link keeps changing color depending on the position of the mouse. I hope I understood you right this time :) – ZiNNED Feb 07 '14 at 15:50
thanks again @ZINNED... the problem now is that I have tabs navigation, and when clicking on the child of a tab, the parrent tab should stay active, so with the color changed... and when clicking on chlid with your code it removes my parrent active class... can you please look at this page to understand ? http://rockonbones.com/the-music/ thanks a lot for your help... it's really a complex issue ! – mmdwc Feb 07 '14 at 16:06
to complete my answer, for example on rockonbones.com/the-music/, when on tab "about the band OZ", and child tab "general info"... THE MUSIC, ABOUT THE BAND OZ & GENERAL INFO have to be colored, and the color should change when moving the mouse... do you see ? – mmdwc Feb 07 '14 at 18:44
@user2882154 Hi, sorry, but I was away over the weekend :) It seems like it's working now though? Have you been able to fix it? – ZiNNED Feb 09 '14 at 19:11

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

2 Answers2