Set CSS 'top' property using Javascript depending on mouse position

Question

I am trying to set the top CSS property through JavaScript.

If I use an absolute value like 100px it works just fine, but if I try to get the mouse position using event.clientX, it does not work.

Please note that I do not want to use jQuery or other libraries.

Code so far:

var el = document.getElementById('hide');

document.getElementById("foo").onmouseover = function() {
  el.style.border = "5px solid red";
  el.style.display = "block";
  el.style.top = '100px'; // This works
  el.style.top = event.clientX; // However this does not work
};

HTML:

<div id="foo">
  <p>
  Hover me
  </p>
</div>

#hide {
  display:none;
}

See also jsfiddle.

Jonas · Accepted Answer · 2016-07-23 22:34:44Z

1

Make sure to add units to size declarations. Also, not sure if you intentionally used clientX and top, as the x-axis goes left-right and top property sets the up-down distance. The result (using top and clientX as you do) could look like this:

var el = document.getElementById('hide');

document.getElementById("foo").onmouseover = function() {
  el.style.border = "5px solid red";
  el.style.display = "block";
  var position = event.clientX + 'px';
  el.style.top = position;
};

answered Jul 23, 2016 at 22:34

Jonas

1,5932 gold badges15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6524633 Over a year ago

Thanks! This worked and yes the clientX, rather than Y, was intentional!

Stayko Dimitrov · Accepted Answer · 2016-07-23 22:40:25Z

0

You haven't passed the event to your function. Also, you're missing 'px'. Try this:

var el = document.getElementById('hide');

document.getElementById("foo").onmouseover = function(event) {
  el.style.border = "5px solid red";
  el.style.display = "block";
  el.style.top = event.clientX + 'px';
};

edited Jul 23, 2016 at 22:40

answered Jul 23, 2016 at 22:30

Stayko Dimitrov

875 bronze badges

1 Comment

Stayko Dimitrov Over a year ago

I really wonder how exactly the accepted answer worked, since it doesn't contain the event assignment to the function :)

Collectives™ on Stack Overflow

Set CSS 'top' property using Javascript depending on mouse position

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related