时间戳

首页 > 解决方案 > 按钮：悬停和光标指针不起作用？

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

问题描述

光标：悬停时的指针和背景颜色更改都不适用于我的按钮。我已经尝试过类似问题的解决方案（从按钮标签切换到锚或 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>

标签： htmlcss

解决方案

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

  1. 设置div.btn内部另一个名为例如的 divdiv.btn-container并将悬停应用到父元素。这肯定会为你工作。（您可以将悬停应用于两者）
  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>

推荐阅读