Question

我创建了一个简单的效果，将一个元素显示在另一个元素上，作为叠加层，它完美地工作，直到我需要在它下面添加一个“按钮”（Bootstrap样式锚点）。

This就是我之前所拥有的，then添加了“按钮”。

效果仍然有效，但现在当悬停按钮或其周围区域时，效果也会被触发。

Then I changed触发<figure>的悬停：

.box figure:hover + .details {
  display: block;
}

前一个问题已经解决了，但是又创建了另一个问题：如果我在.box内部移动光标，效果将被移除并无限期地重新应用，在几毫秒内，使叠加闪烁在屏幕上。

我该如何解决？

注意：我无法移动.box之外的“按钮”，因为在实际情况中.box会重复从数据库中检索记录的次数

Answer 1

您希望添加的元素忽略指针事件 - 让鼠标与新显示的.details元素进行交互会导致：hover样式规则被破坏（因为.details元素现在阻止了图形：悬停）。 / p>

.box figure:hover + .details {
 display: block;
 pointer-events:none;
}

Answer 2

我建议您创建另一个“包装器”，它将在项目下方<figure>和“删除”按钮之间定义清晰的分隔。

如果您采用这种方法，只需在“内容包装器”上添加:hover即可。像这样：

<div id="main">
     <h1>
         Title<small>Subtitle</small>
     </h1>
     <div class="col-md-4 box">
         <div class="content">
             <figure>
                 <img src="http://i.imgur.com/xB5nEoT.png" />
             </figure>
             <div class="details">
                 <a href="#" data-balloon="Details">
                     <span class="fa fa-search-plus"></span>
                 </a>
             </div>
         </div>
         <a href="#" class="btn btn-sm btn-danger">
             <span class="glyphicon glyphicon-remove"></span>
             Delete
         </a>
    </div>
</div>

悬停CSS：

.box .content:hover .details {
   display: block;
}

<强> JsFiddle

希望这就是你要找的东西。

隐藏元素闪烁：悬停

2 个答案: