按钮：悬停和光标指针不起作用？

Question

光标：悬停时的指针和背景颜色变化都不适用于我的按钮。我已经尝试过类似问题的解决方案（从按钮标签切换到锚或 div 标签，更改了 z-index），但它们都没有帮助。样式的其余部分工作正常，所以我不明白为什么会这样，请帮忙。

.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

这是 webkit 浏览器上的一个错误，不允许您看到悬停效果。 您可以通过两种方式做到这一点：（您可以同时做到）

1. 在另一个名为 div.btn-container 的 div 中设置 div.btn 并将悬停应用到父元素。这肯定会为你工作。 （您可以将悬停应用到他们两个）
2. 将display: inline-block 更改为display: inline。内联有时会导致一些问题。 （有时）

.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 2

如果其他人有这个问题。我有一个盒子阴影覆盖来在背景上添加一个阴影，阻止按钮注册鼠标悬停。将按钮 z-index 更改为 100 并没有帮助，但是当我将覆盖索引更改为 -1 时，它解决了这个问题。

Answer 3

光标：鼠标悬停时的指针和背景颜色变化都不适用于我的按钮。

sn-p 中的代码是你使用的那个吗？

因为在代码中 sn-p .btn:hover 工作得很好？ 您是否尝试过强制刷新浏览器。

Control + F5

您也可以尝试使用其他浏览器运行该页面。

编辑： 根据您对其他 cmets 的回答，我认为这可能是系统或浏览器错误。如果纯 css 在您的系统中不起作用（如果您可以使用它），这是一个 Jquery 替代方案。

 .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