How to use mousemove to change a div's background color?

Question

I was hoping to import the mouse coordinates to the numbers in a div's change background color to rgb(event.clientx, eventclientY, 50). Any ideas?

  <body>

  <p>
  <span>Move the mouse over the div.</span>
  <span>&nbsp;</span>
   </p>
  <div></div>

   <script>
   $( "div" ).mousemove(function( event ) {
      var $corX = $("(event.pageX)/10");
      var $corY = $("(event.pageY)");
      var $coloChange = $("rgb(" + $corx+ ", " + $corY + ",40)");
      $("div").css"("background", "$colorChange");
    });
</script>

I believe this is what you need: http://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element — David, Sep 09 '16 at 20:14

score 0 · Answer 1 · answered Sep 09 '16 at 20:19

0

Firstly you're putting mathematical calculations in to strings, and those strings in to jQuery objects. You just need to execute them directly. The same for the concatenation of the rgb() string. You also have mis-matched cases in your variable names. Once you fix those issues your code should work:

$("div").mousemove(function(e) {
    var corX = e.pageX / 10;
    var corY = e.pageY;
    $("div").css("background-color", "rgb(" + corX + ", " + corY + ",40)");
});

div {
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
</p>
<div></div>

answered Sep 09 '16 at 20:19

Rory McCrossan

331,213
40
305
339

But `e.pageX` and `e.pageY` are the coordinates on the page and Mike probably wants the color to vary between 0 and 255 on each channel. In which case you'd need to compensate for element width and element position on the page. – David Sep 09 '16 at 20:30
Possible, although the OP doesn't state that at all. `offsetX` and `offsetY` would be more applicable in that case as you can simply compare them to the height/width of the element – Rory McCrossan Sep 09 '16 at 20:34

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

It's simple, you almost was right in your code. A 'variable' on jquery does not need necessarily the $, you can see more details here). :) and you can see here how to use .pageX and .pageY, that is simple as well.

Here is you code, just a little different, now working.

https://fiddle.jshell.net/on27dn0c/

P.S. You can use transition on CSS for a better effect.

I hope it can help you.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 09 '16 at 20:45

Claudio Bonfati

493
3
14

Hi Claudio, this is perfect, exactly what I was looking for. I tried recreating your fiddle, even copied and pasted your code into a new fiddle and it didn't work. Do I have to set it up differently that the default – Mike Sep 09 '16 at 22:53
Hi, You're on the right way, but you just forgot one thing. Jquery is a **Library Javascript**, so it's not default on the browsers, and on the _Fiddle_ isn't different :) On your _Fiddle_ click on the buttom "External Resources" (left at screen) and add the link of the **Library Jquery** (Using CDN). You can find the links of all versions [here](https://code.jquery.com/). If you want it right now, here is the link -> https://code.jquery.com/jquery-3.1.0.min.js :) – Claudio Bonfati Sep 09 '16 at 23:31
If there is no more doubts, don't forget to choose this answer as the right ✔ to close the question. :) – Claudio Bonfati Sep 12 '16 at 10:33

How to use mousemove to change a div's background color?

2 Answers2