1

Extending on my previous question, how can I make a div turn red and the cursor turn to a pointer when the mouse hovers over the left 10px of the div, and make the div turn green and turn the cursor to a pointer when hovering over the right-most 10px of the div?

Community
  • 1
  • 1
Keavon
  • 6,837
  • 9
  • 51
  • 79
  • Added the pointer part to my answer, since I forgot it. – Alex W Oct 12 '13 at 20:55
  • Although you may no longer need this answer, others might in future - we try to keep SO as a resource for new users so I'm going to alter your edit slightly – Basic Oct 12 '13 at 20:55
  • 1
    Yes, I noticed that so I removed my part about deleting it after people posted real answers. I'm sorry for creating such spam by making 3 questions. – Keavon Oct 12 '13 at 20:59
  • 2
    No worries, just try to keep each question self-contained - otherwise people trying to help you have to scroll through pages of Q and A to find out what you're asking. No problem asking lots of questions, or linking so that others who are interested can read more, just make sure it's not required to understand your question. All the best and see you around – Basic Oct 12 '13 at 21:05

2 Answers2

1

Can use the jQuery mousemove handler, like this:

$('div').mousemove(function(e){
       var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
    if(relX <= 10) $(this).css({'background-color':'red','cursor':'pointer'});
    else if(relX > ($(this).width() -10)) $(this).css({'background-color':'green','cursor':'pointer'});
    else
        $(this).css({'background-color':'gray','cursor':'auto'});
});

http://jsfiddle.net/kPK83/1/

Relative element positioning came from this answer.

Community
  • 1
  • 1
Alex W
  • 37,233
  • 13
  • 109
  • 109
1

Here is an another answer for code based on your previous code/question.

http://jsfiddle.net/QL3Sj/2/

$("div").on({
    mousemove: function (e) {        
        var $this = $(this);
        var x = e.offsetX;
        var width = $(this).width();

        // fix for firefox
        if(typeof x === "undefined"){
           x = e.pageX - $this.offset().left;
        }        
        if ( x<= 10 ) {
            $this.css("background-color", "red");
            $this.css("cursor","pointer");
        }
        else {
            $this.css("background-color", "white");
            $this.css("cursor","default");
        }

        if ( x > (width-10)) {
            $this.css("background-color", "green");
            $this.css("cursor","pointer");
        }    

    },
    mouseleave: function (e) {
        $(this).css("background-color", "white");
        $this.css("cursor","default");
    }
});
  • 1
    This one, while longer, is easier to modify to fit my purpose and doesn't have the bug where leaving the div keeps the color the same. This answer has been changed to Best Answer. – Keavon Oct 12 '13 at 21:09
  • 1
    @Keavon yeah we wouldn't want you to have to figure anything out on your own, would we ;) ? – Alex W Oct 12 '13 at 21:13