How can I disable a button when you hover over it?

I need to know how can I disable a button when I hover over it, and then enable it when I'm not.

I've tried javascript, to disable it when the mouse coordinates were just so, but it didn't work.

Here's my code so far:

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>This is a button</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <button type="button">Press Me</button>

  <script src="script.js"></script>
</body>

</html>

This is for a joke, but I want it done quickly.

Thanks, Enlighten Me

PS: I'm new to StackOverflow, so please give any pointers to posts and such.

Solution

use this

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<button type="button" id="hbtn">Press Me</button>

</body>
<script>
document.getElementById('hbtn').addEventListener('mouseenter',(event)=>{
event.target.disabled=true;
});
</script>
</html>

Hope this helps