Sayfanın Üstü Ölçek Hatası ile bir div

Question

HTML & CSS ile yeni Im ve bu benim ilk sorum. Farenizle tuttuğunuzda 1.0'dan 0.8'a ölçeklendiren bir kutu yapmaya çalıştım.

Kutudaki ortada (0.0 arasındaki 0.8) çalışırken gayet iyi çalışıyor.

0.8 ve 1.0 arasında olduğunuzda fareyi hareket ettirdiğimde her zaman delirir.

1.0 alanının tamamını istediğiniz zaman kutu 0.8 alanına ölçeklendirir. Sabit 1.0 bölgesinden ayrıldığımda 1.0'a geri ölçek olmalıdır. Başka alan yok. Kendime yardım edemem.

Test o veya görmek:https://jsfiddle.net/cyLxLbya/

YouTube Video:https://youtu.be/4MT4hrK7DVE (sol 0-0.8 arasında, sağ 0.8-1 arasında deli gider)

Answer 1

sorun kaydırma olayı olduğu öğe ölçeklenirken tetikleme ve bulanıklaştırma. Bir şeyi tespit edersiniz: vurgulu ama öğe yeterince küçüldüğünde kaybeder: vurgulu durum ve tekrar büyütmeye çalışır. Ve tekrar geri (içine girdiği gibi: tekrar hover).

Bunu düzeltmenin yollarından biri, vurgunun üst öğede algılanmasıdır (ölçeklenmeyen). Örneğin: https://jsfiddle.net/cyLxLbya/1/

.box{ 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    box-shadow: inset 0px 0px 83px -8px rgba(0,0,0,0.75); 
    transition: all 200ms ease; 
    transition-duration: 0.2s; 
} 

.hover:hover .box{ 
    transform: scale(0.8); 
    box-shadow: inset 0px 0px 24px 0px rgba(0,0,0,0.75); 
} 

Kutunun kendisinin (kutusunun gelme durumu) geçiş hareket ettirmek için de tavsiye edilir.