button:hover and cursor pointer not working?

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>

Are you using a framework like Bootstrap? Bootstrap uses `.btn` extensively. — Rob Moll, Aug 04 '21 at 19:13
Not working in what respect? When I hover these buttons in your snippet they change color and the cursor changes? (Also, for what it is worth, using `
` elements instead of `` elements with no accessibility imbued with ARIA means that this page will be inaccessible to keyboard users; why not just use a ``? — Alexander Nied, Aug 04 '21 at 19:14
Could you clarify the issue? The buttons have a pointer: cursor and the background is changing on hover in your snippet. — Rolv Apneseth, Aug 04 '21 at 19:14
Yes i noticed it works fine in the snippet on stackoverflow, but when i run the webpage on chrome or safari neither work (ie- the cursor is still an arrow and no color change occurs). I'm not using bootstrap. I had originally used a button tag but it was suggested that the default behavior was causing the problem. — lkerr, Aug 04 '21 at 20:11
Now that it is working, I want to give you a suggestion. You can make the hover effect not work when the button is disabled, as it makes more sense, You can achieve that by the following code: ``` .disabled:hover { background-color: #15181c; } ``` — Zayaan, Jul 22 '23 at 09:57

score 1 · Answer 1 · answered Aug 05 '21 at 10:37

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.

Amini · Answer 2 · 2021-08-04T19:39:52.260

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>

Unfortuantely neither of these seemed to work, i did notice it works fine in the snippet on stackoverflow, but on neither chrome nor safari. Thankyou for your help anyways! — lkerr, Aug 04 '21 at 20:07
Try to update your browser or restart your system or try on another system. — Amini, Aug 04 '21 at 21:02

Ossi H. · Answer 3 · 2021-08-05T15:01:13.270

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

Hi yes its the same code, i saw it was working on here but when i run the page on chrome or safari the effects don't work. I tried refreshing and closing everything down and reopening but neither worked. — lkerr, Aug 04 '21 at 20:14
What version of chrome are you using? And have you tried updating it? There is an old known bug with some version of chromium based browsers [CSS hover is not triggered when draging into an element](https://bugs.chromium.org/p/chromium/issues/detail?id=122746) — Ossi H., Aug 05 '21 at 14:20

score -1 · Answer 4 · answered Jul 22 '23 at 09:44

-1

I share what worked for me: the Wordpress plugin WP Rocket was preventing "cursor: pointer" from working properly. Purging CSS in WP Rocket fixed the issue. Hope that helps someone.

answered Jul 22 '23 at 09:44

Couch_Sweet_Potato

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 26 '23 at 12:44

button:hover and cursor pointer not working?

4 Answers4