【问题标题】:How to make hover effect not appear when pseudo-element is hovered on如何使伪元素悬停时不出现悬停效果
【发布时间】:2022-09-30 15:49:57
【问题描述】:

我想要悬停效果(伪元素的背景变为绿色)只要当按钮悬停时出现,但是当伪元素(绿色框​​)悬停时也会出现。

button {
    box-sizing: border-box;

  background-color: blue;
  padding: 10px 20px;
  color: white;
  position: relative;
}

button::before {
  content: \'\';
  position: absolute;
  background-color: transparent;
  height: 20px;
  width: 100%;
  left: 0;
  bottom: -30px;
}

button:hover::before {
  background-color: green;
}
<button>
I am a button
</button>

    标签: html css


    【解决方案1】:

    您可以通过首先将display 属性设置为display: none; 将伪元素的默认状态设置为隐藏来实现这一点。
    button 元素的悬停事件中,您可以通过将display 属性更新为display: block; 使其可见 但是,如果您将鼠标从button 元素上松开,它将再次被隐藏。
    希望这不是某种下拉菜单,如果是这样,这不是你应该这样做的方式。

    button {
        box-sizing: border-box;
    
      background-color: blue;
      padding: 10px 20px;
      color: white;
      position: relative;
    }
    
    button::before {
      content: '';
      position: absolute;
      background-color: transparent;
      height: 20px;
      width: 100%;
      left: 0;
      bottom: -30px;
      display: none;
    }
    
    button:hover::before {
      background-color: green;
      display: block;
    }
    <button>
    I am a button
    </button>

    【讨论】:

      【解决方案2】:

      @nad 通过添加 pointer-events: none; 您可以阻止所有单击和光标事件。

      button {
          box-sizing: border-box;
      
        background-color: blue;
        padding: 10px 20px;
        color: white;
        position: relative;
      }
      
      button::before {
        content: '';
        position: absolute;
        background-color: transparent;
        height: 20px;
        width: 100%;
        left: 0;
        bottom: -30px;
        pointer-events: none;
      }
      
      button:hover::before {
        background-color: green;
      }
      <button>
      I am a button
      </button>

      【讨论】:

      • 这似乎是一个更好的答案。感谢更新。
      猜你喜欢
      • 2017-01-08
      • 1970-01-01
      • 2012-02-11
      • 1970-01-01
      • 2012-12-16
      • 1970-01-01
      • 1970-01-01
      • 2016-06-15
      • 2015-06-18
      相关资源
      最近更新 更多