隐藏的元素闪烁：悬停

我创建了一个简单的效果，将元素作为叠加层显示在另一个元素上，直到我需要在其下面添加一个“按钮”（Bootstrap样式锚）为止。隐藏的元素闪烁：悬停

This是我之前的版本，then添加了“按钮”。

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

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

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

和以往的问题是解决了，但是另外一个被创造：如果我移动光标的.box内的效果被移除并重新无限期地重复应用，只需几毫秒，使覆盖层在屏幕上闪烁。

我该如何解决这个问题？

注：我不能移动“按钮”外.box因为在真实的情景.box将重复多次，记录正在从数据库中检索

来源

2016-09-30 user5613506

让我劝你再创建一个“包装”将定义项之间的明确分工与<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

希望这是你所期待的。

来源

2016-09-30 15:58:08 nkmol

这是完美的:) – user5613506

你想添加的元素忽略指针事件 - 鼠标与新显示的.details元素进行交互会导致：悬停样式规则被破坏（因为.details元素现在阻止该图：悬停）。

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

来源

2016-09-30 15:34:24 hairmot

不是我关心兼容性，尽管它解决了这个问题，[我跑了一个检查]（http://caniuse.com/#feat=pointer-events），这是一个相当晚的加法。这是唯一的方法吗？ – user5613506

隐藏的元素闪烁：悬停

回答

相关问题