Bootstrap 3自定义popover元素单侧hover失效问题求助

问题原因 #

你给 popover 设置了 margin-left: 100%，让它定位到父容器右侧，但右侧的 .col-md-7 列元素会覆盖在它的右下侧区域——鼠标悬停到这个区域时，实际触发的是右侧列的事件，而非 popover 本身，所以hover样式没生效。

解决方案 #

给 popover 元素添加相对定位和层级优先级，让它覆盖在右侧列上方，确保整个圆形区域都能捕获鼠标事件：

popover {
  margin-left: 100%;
  padding: 5px 11px;
  border: solid 1px;
  border-radius: 25px;
  font-size: 1em;
  cursor: pointer;
  transition: 0.3s;
  /* 新增以下两行 */
  position: relative;
  z-index: 1;
}

popover:hover {
  border-color: #D83F58;
  color: #D83F58;
}

补充调整 #

如果添加后仍有问题，检查右侧 .col-md-7 或其父元素是否设置了更高的 z-index，适当提高 popover 的 z-index 值即可。要是右侧列不需要任何鼠标交互，也可以给它加 pointer-events: none（但会让列内所有元素都失去交互能力，按需使用）。

内容的提问来源于stack exchange，提问作者Madhav Malhotra