隱藏的元素閃爍：懸停

我創建了一個簡單的效果，將元素作爲疊加層顯示在另一個元素上，直到我需要在其下面添加一個「按鈕」（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

隱藏的元素閃爍：懸停

回答

相關問題