Avatardaki "Düzenle" yazısı için CSS güncelleme önerisi

Merhaba,

Başlıkta neyi kastettiğimi tam aktaramamış olabilirim, hemen görsel olarak göstereyim:

Mobil cihazlarda, daha doğrusu sanırsam dokunmatik ekranı olan cihazlarda (.has-touchevents sınıfının aktif olduğu), normalde bilgisayarda ancak avatarın üzerine fareyle gelince beliren "Düzenle" yazısı her türlü gözüküyor. Bu yazının belirmesi için tanımlanmış CSS özelliklerini inceledim ve şunu buldum:


Burada iki kombinasyon için söz konusu yazının opaklığı 1 oluyor:

• .avatarWrapper:hover .avatarWrapper-update
• .has-touchevents .avatarWrapper-update

.avatarWrapper-update sınıfı direkt "Düzenle" yazısını barındıran elementin sınıfı, iki kombinasyonda da bulunuyor. Fark, ilk sınıflarda:

• .avatarWrapper:hover sınıfı, fare imleci elementin üzerine gelince yazının belirmesini sağlıyor.
• .has-touchevents sınıfı, dokunmatik ekranlarda elementin üzerine gelinemeyeceği için yazının ne olursa olsun belirmesini sağlıyor.

"Düzenle" yazısının içinde bulunduğu a elementinin (tıklanan/basılan asıl element) sadece opaklığı (opacity) değiştiriliyor yani element hep var, sadece görsel olarak görünür/görünmez hâle geliyor. Bundan dolayı aslında ikinci kombinasyon olan .has-touchevents .avatarWrapper-update silinebilir.

Bu değişikliğin uygulanması hâlinde örneğin telefonlarda "Düzenle" yazısı gözükmeyecek fakat yazının içinde bulunduğu a elementi, avatar elementinin alt yarısını tamamen kapsadığından ötürü alt yarıya basıldığında düzenleme ekranı gelebilecek:

Uzun lafın kısası, iki farklı önerim var:

1. İkinci kombinasyon olan .has-touchevents .avatarWrapper-update silinebilir, yeni hâl şöyle olacak:
   

   CSS:

   .avatarWrapper:hover .avatarWrapper-update {
       opacity: 1;
   }

2. Bu CSS özelliği tamamıyla silinebilir ve a elementi avatarın yarısı yerine tamamını kaplayabilir. "Düzenle" yazısının kaldırılmasını önermiş oluyorum.​

İlk önerimin daha uygun olabileceğini düşünmekle birlikte ikincisini de sunayım dedim.

İlginiz için teşekkür ederim.