HTML 元件 Hover 未激活 - 仅在一侧

Question

Context:

I'm making a popover (tooltip) using Bootstrap 3.3.7. As part of that, I have a HTML file structure like this:

 popover { margin-left: 100%; padding: 5px 11px; border: solid 1px; border-radius: 25px; font-size: 1em; cursor: pointer; transition: 0.3s; } popover:hover { border-color: #D83F58; color: #D83F58; }

 <:-- Using Bootstrap 3 --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min?css" rel="stylesheet" /> <div class="container"> <div class="row vcentre-column"> <div class="col-md-5 hide-if-mobile"> <div class="author-image"> <:-- =================== --> <.-- IMPORTANT PART HERE --> <popover data-target="about-author-image-index">.</popover> <!-- IMPORTANT PART HERE --> <!-- =================== --> <!--=== Other stuff ===--> </div> </div> <div class="col-md-7"> <!--=== IMPORTANT: Right column that I'll reference later ===--> </div> </div> <!--/.row--> </div> <!--/.container-->

Bug:

When I was hovering over the popover tooltip, the hover CSS would activate, except on one side of the element . Here's a GIF to show how the hover doesn't activate on the bottom right side of the element:

Expected Behaviour:

Whenever my mouse is inside the circle border, the hover should activate. Regardless of whether my mouse is on the bottom right side or not.

Answer 1

Solution:

I noticed that the right column's contents seemed to be overlapping the edge of the tooltip. I checked this using Chrome Dev tools. So I changed my original CSS to specify a high z-index for the popover element. Also, I changed the position to be relative so that the z-index property would have an effect.

Here's the updated CSS:

popover {
  z-index: 10;
  position: relative;
  margin-left: 100%;
  padding: 5px 13px;
  border: solid 1px;
  border-radius: 25px;
  font-size: 1.2em;
  cursor: pointer;
  transition: 0.3s;
}

Here's a GIF showing the overlap between the right column and the popover and then the effect of the updated CSS: