ホバー上のフリッカーの問題：変換のため

Question

:beforeはposition: absoluteを使用して完全な.boxを使用して完全なボックスをクリックできるようになりました。 .boxのどこかを動かすと、aはホバードになるはずです。 transformが削除された場合、これは正常に動作します。リンクは、:hoverにtransform: scale(1.2)です。それはそれをちらつく。

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

この1つはトリッキーであると私は答えを持っているが、我々は一緒に調査することができることはよく分かりません。

最初にできることは、擬似要素に背景色を与えて、何が起きているのかを視覚化できるようにすることです。色がすべてをカバーするので、それを横に動かしてみましょう。

.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. ホバーアニメーションはO処理に戻る
3. 元の位置のITへ
4. 擬似要素戻りを終了します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>