Click event in electron not working AND mouse icon not changing when I hover over a html button?

Question

I'm working on a project using the electron framework. I have an HTML file, a CSS file, and a Javascript file. The problem I'm having is that when I hover over a button, the hand pointer icon doesn't pop up even though I have given it the attribute to do so in my CSS code.

Here is my HTML code:

<button style="background: url(images/cross.svg);" alt="exit" id="exit_button"></button>

Here is my CSS code:

#exit_button{
    cursor: pointer;
    width: 15px;
    border: 0px;
    height: 15px;
    margin: 0%;
    padding: 0%;
    position: absolute;
    top: 5px;
    right: 5px;
}

And here is my Javascript code:

//variables
const remote = require('electron').remote;

const exit_button = document.getElementById("exit_button");

//Firing functions
exit_button.addEventListener('click', close_window);

//functions
function close_window() {
    console.log("exit_button clicked, window closing..."); //This DOESN'T print
    var current_window = remote.getCurrentWindow();
    current_window.close();
};

The click event assigned to the exit_button isn't working either along with the pointer issue.

Thanks in advance.

Answer 1

I tried putting your code in a JSFiddle and it worked without issue. Maybe there's something else that's conflicting? Use developer tools and disable styles one by one to find the culprit.

Answer 2

Ah, the problem was that I had

-webkit-user-select: none;
-webkit-app-region: drag;

In its parent. This stopped me from clicking it. I had to add the following in my css:

-webkit-user-select: auto;
-webkit-app-region: no-drag;

And now my css looks like this:

#exit_button{
    cursor: pointer;
    border: 0px;
    width: 15px;
    height: auto;
    padding: 7.5px;
    position: absolute;
    top: 5px;
    right: 5px;
    -webkit-user-select: auto;
    -webkit-app-region: no-drag;
}