僅使用CSS製作可點擊動畫的懸停點

Question

當您將鼠標懸停在圖片上時只使用CSS，而且還讓子項接受點擊事件，這一點就是讓aside元素進入。

到目前爲止，我所擁有的是一個正常工作的動畫懸停，其中有一個按鈕，並且該按鈕的確對起作用。我已經在滑動aside元素上使用了pointer-events: none，因爲否則動畫會跳動到斷點，因此，pointer-events: none可以避免這種情況，並且只要您徘徊，動畫就會流暢且持久。

當您將鼠標懸停在按鈕上時，會出現該問題。這將使aside轉換出來（請參閱fiddle，這比我的英文破碎更好）。

我正在尋找一種方法來防止aside返回到其初始隱藏位置。當然，挑戰僅僅是使用CSS！

下面是代碼（這也是在fiddle）：

HTML：

<div class="thumbnail"> 
    <img src="http://i59.tinypic.com/10cvw8y.jpg" class="template-img"> 
    <aside tab-index="1" class="hover"> 
    <button class="button" onclick="alert('wow')">CLICK ME</button> 
    </aside> 
</div> 

CSS：

.thumbnail { 
    position: relative; 
    overflow: hidden; 
} 

.template-img { 
    width: 100%; 
    height: 100%; 
} 

.template-img:hover ~ .hover { 
    transform: translateX(0); 
} 

.template-img:focus { 
    pointer-events: none; 
} 

.template-img:focus ~ .hover { 
    transform: translateX(0); 
    transition: none; 
} 

.hover { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    padding-top: 15%; 
    transform: translateX(-100%); 
    transition: transform .4s ease-out; 
    pointer-events: none; 
    background: rgba(255, 0, 0, 0.4); 
    z-index: 10; 
} 

.button { 
    pointer-events: auto; 
} 

Answer 1

添加下面的風格似乎解決了這一問題

.hover:hover { 
transform: translateX(0); 
} 

強制動畫徘徊內容時以及

這裏有一個fiddle