如何在HTML中实现按钮Hover高亮及Bootstrap Popover悬停触发

Let's break down your requirements and fix them step by step:

1. Make Bootstrap Popover Trigger on Hover #

By default, Bootstrap Popovers trigger on click. To switch to hover, you just need to add the data-trigger="hover" attribute to your button. For better accessibility, you can also include focus so keyboard users can trigger it too:

<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" 
        data-toggle="popover" 
        data-placement="right" 
        data-content="{{.Status}}"
        data-trigger="hover focus"> <!-- Add this line -->
  <i class="glyphicon glyphicon-ok"></i>
</button>

2. Add Hover Highlight (Similar to Clicked State) #

Your current CSS adjusts the button size on hover, but to replicate that "light outline" effect from the red button's clicked state, we'll use box-shadow (this matches Bootstrap's native focus state styling). Since your buttons have different colors based on status, we'll target each color class specifically:

/* Existing hover size adjustments */
.btn-circle.btn-lg:hover {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle:hover {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 25px;
  opacity: 1;
  border-width: 3px;
}

/* Add hover highlight for red (terminating) button */
.btn-circle.btn-danger:hover {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); /* Light red outline */
}

/* Add hover highlight for green (running) button */
.btn-circle.btn-success:hover {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); /* Light green outline */
}

Quick Notes: #

• I assumed statusButtonClass returns btn-danger for terminating (red) and btn-success for running (green) — adjust the class names in the CSS if your actual color classes are different.
• The box-shadow values match Bootstrap's default focus state styling, so it will look consistent with the framework's design.

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