懸停時閃爍問題：由於變換

Question

:before已覆蓋完整.box使用position: absolute以便完整框可點擊。如果我將鼠標懸停在.box的任何地方，則a應該懸停。這工作正常如果transform被刪除。鏈接有transform: scale(1.2)在:hover。這使它閃爍。

如果transform被刪除。一切正常。這個問題在Chrome和Firefox中。

.box { 
 
    height: 400px; 
 
    border: 1px solid #ccc; 
 
    padding: 30px; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
.box a { 
 
    display: block; 
 
    border: 1px solid #ccc; 
 
    padding: 20px; 
 
} 
 

 
.box a:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
.box a:hover { 
 
    background: red; 
 
    transform: scale(1.2); 
 
}

<div class="box"> 
 
    <a href="#" class="link">Test</a> 
 
    <h3>test</h3> 
 
</div>

Answer 1

我沒能找到這個問題的原因。但是，能夠以不同的方式解決問題。

增加了:after與a相同的大小，並給予後懸停行動。

.box { 
 
    height: 400px; 
 
    border: 1px solid #ccc; 
 
    padding: 30px; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
.box a { 
 
    display: block; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    transition: font-size 0.5s; 
 
    text-decoration: none; 
 
    color: transparent; 
 
} 
 

 
.box a:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 

 
.box a:after { 
 
    content: attr(title); 
 
    display: block; 
 
    border: 1px solid #ccc; 
 
    padding: 20px; 
 
    color: #666; 
 
    transition: transform 0.5s; 
 
} 
 

 
.box a:hover:after { 
 
    transform: scale(1.2); 
 
    background: red; 
 
}

<div class="box"> 
 
    <a href="#" class="link" title="View Offer">View Offer</a> 
 
    <h3>test</h3> 
 
</div>

Answer 2

這是一個棘手，我不知道，我有一個答案，但我們可以一起進行調查。

我們可以做的第一件事是給僞元素一個背景色，以便我們可以看到發生了什麼。讓我們也將它移到一邊，因爲顏色將涵蓋所有內容。

.box { 
 
    height: 400px; 
 
    border: 1px solid #ccc; 
 
    padding: 30px; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
.box a { 
 
    display: block; 
 
    border: 1px solid #ccc; 
 
    padding: 20px; 
 
} 
 

 
.box a:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 400px; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: red; 
 
    width: 100px; 
 
} 
 

 
.box a:hover { 
 
    background: red; 
 
    transform: scale(1.2); 
 
}

<div class="box"> 
 
    <a href="#" class="link">Test</a> 
 
    <h3>test</h3> 
 
</div>

當你將鼠標懸停在僞元素，你會看到，它改變形狀和肢體動作。這似乎是由於轉換造成的，因爲僞元素是一個孩子，並且會受到應用於其父項的樣式的影響。

更確切地說，發生的事情是一個重複循環：

1. 您將鼠標懸停在僞元素
2. 哈弗動畫應用到父母和孩子
3. 僞元素移出的方式光標的
4. 懸停動畫結束
5. 僞元件返回到它的原始位置
6. 回到步驟o ne

轉換似乎創建了一個new stacking order & context。這就是爲什麼子元素的位置被重置。到目前爲止，我無法想出一個解決方法。

一個非常簡單的解決方案是遠離整個主題，並將想要點擊的區域封裝到自己的錨標籤中。

.box { 
 
    height: 400px; 
 
    border: 1px solid #ccc; 
 
    padding: 30px; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 

 
a { 
 
    display: block; 
 
} 
 

 
a:hover .box { 
 
    background: red; 
 
    transform: scale(1.2); 
 
}

<a href="#" class="link"> 
 
    <div class="box"> 
 

 
    <h3>test</h3> 
 
    </div> 
 
</a>