如何为特定Bootstrap按钮设置仅悬停自身时生效的hover效果

这个问题通常由CSS选择器不精准、盒模型触发范围溢出、事件冒泡（JS实现hover的场景）三类原因导致，可按以下步骤排查修复：

• 修正CSS选择器范围
  不要将hover伪类绑定到按钮的父级行/列容器上，直接给目标按钮添加唯一自定义类，把hover样式绑定到按钮本身即可。
  错误示例：

  /* 只要悬停在整个row上就会触发按钮样式 */
  .row:hover .custom-btn {
    background-color: #2563eb;
    border-color: #2563eb;
  }
  

  正确示例：

  /* 只有悬停在按钮本身才会触发样式 */
  .custom-btn:hover {
    background-color: #2563eb;
    border-color: #2563eb;
  }
  

• 排查盒模型触发范围
  按F12打开浏览器开发者工具，选中目标按钮查看它的实际盒模型区域，确认margin、padding没有导致触发范围溢出视觉按钮区域，如果存在溢出可以给按钮添加overflow: hidden属性限制触发范围。
• JS实现hover的场景阻止事件冒泡
  如果你是用JS的mouseover/mouseenter事件实现hover效果，需要在按钮的事件回调中添加阻止冒泡逻辑，避免父级容器的事件被触发后联动修改按钮样式：
  原生JS示例：

  const targetBtn = document.querySelector('.custom-btn')
  targetBtn.addEventListener('mouseenter', (e) => {
    e.stopPropagation()
    // 你的hover触发逻辑
  })
  targetBtn.addEventListener('mouseleave', (e) => {
    e.stopPropagation()
    // 你的hover取消逻辑
  })
  

• 隔离元素格式化上下文
  给目标按钮添加display: inline-block或者position: relative属性，触发独立的块级格式化上下文，避免和同一行的其他元素触发区域重叠。

内容的提问来源于stack exchange，提问作者jesse nnorom