button:hover and cursor pointer not working? - html

Question

The cursor: pointer and background-color change on hover are both not working on my buttons. I have tried the solutions i have seen to similar questions (swapped from a button tag to a anchor or div tag, changed the z-index) but none of them have helped. The rest of the styling is working fine so i don't understand why this is happening, please help.
.btn {
cursor: pointer;
position: relative;
display: inline-block;
width: 80px;
height: 30px;
background-color: #15181c;
border: none;
margin: auto 10px;
border-radius: 5px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
transition-duration: 0.3s;
padding: 5px 10px;
}
.btn:hover {
background-color: lightslategray;
}
.disabled {
opacity: 0.5;
}
<div class ="buttons">
<div class="btn">DEAL</div>
<div class="btn disabled">HIT</div>
<div class="btn disabled">STAND</div>
</div>

Answer 1

In case anyone else has this issue. I had a box shadow overlay to add a shadow on the background which was stopping the buttons from registering the mouse hover. Changing the button z-index to 100 didn't help, but when i changed the overlay index to -1 it solved the issue.

Answer 2

It's a bug on webkit browsers that doesn't allow you to see the hover effect.
You can do it in 2 ways: (You can do both)
Set the div.btn inside another div called for example div.btn-container and apply the hover to the parent element. This will surely work for you. (You can apply the hover to both of them)
Change the display: inline-block to display: inline. Inline sometimes causes some issues. (Sometimes)
.buttons {
display: flex
}
.btn {
position: relative;
/* SET THE DISPLAY TO INLINE-BLOCK */
display: inline;
width: 80px;
height: 30px;
background-color: #15181c;
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
transition-duration: 0.3s;
padding: 5px 10px;
}
.btn-container {
margin: auto 10px
}
/* YOU CAN WRITE BOTH IN YOUR CSS FILE HERE */
.btn:hover {
cursor: pointer;
background-color: lightslategray;
}
.btn-container:hover btn {
background-color: lightslategray;
cursor: pointer;
border: 1px solid red
}
/* UNTIL HERE */
.disabled {
opacity: 0.5;
}
<div class="buttons">
<div class='btn-container'>
<div class="btn">DEAL</div>
</div>
<div class='btn-container'>
<div class="btn disabled">HIT</div>
</div>
<div class='btn-container'>
<div class="btn disabled">STAND</div>
</div>
</div>

Answer 3

The cursor: pointer and background-color change on hover are both not working on my buttons.
Is the code in the snippet the one you are using?
Since in the code snippet .btn:hover is working just fine?
Have you tried force-refreshing your browser.
Control + F5
You can also try running the page with a different browser.
Edit:
Based on the answers you have given to the other comments, I think it might be a system or browser bug. Here's a Jquery alternative if the pure css does not work in your system (if you are fine with using it).
.buttons {
display: flex
}
.btn {
position: relative;
display: inline;
width: 80px;
height: 30px;
background-color: #15181c;
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
letter-spacing: 1.5px;
transition-duration: 0.3s;
padding: 5px 10px;
}
.disabled {
opacity: 0.5;
}
.btn:hover, .btn.jqHover {
background-color: lightslategray;
cursor: pointer;
border: 1px solid red
}
.activeElement {
background:#bfbfbf;
}
<div class="buttons">
<div class='btn-container'>
<div class="btn">DEAL</div>
</div>
<div class='btn-container'>
<div class="btn disabled">HIT</div>
</div>
<div class='btn-container'>
<div class="btn disabled">STAND</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
var hoveredElement;
var clickedElement;
$(document).mousemove(function (event) {
hoveredElement=event.target.nodeName;
// comment this section in between to see issue
$(hoveredElement).mouseenter(function () {
$(this).addClass('jqHover');
}).mouseleave(function () {
$(this).removeClass('jqHover');
});
return hoveredElement;
});
$(document).click(function (event) {
clickedElement = event.target.nodeName;
return clickedElement;
});
});
</script>
Original Jquery answer by Sai