Css - Table alanlarını hover'a göre blur yapmak

serkankuyu 1487 gün önce

538 defa görüntülendi

Merhaba,
İstediğim şu...

Bir table düşünün mouse bir alana geldiğinde diğer alanın blur olmasını istiyorum. Bunu nasıl yapabilirm?

<table>
    <thead>
        <tr>
            <th>Başlık 1</th>
            <th>Başlık 1</th>
            <th>Başlık 1</th>
            <th>Başlık 2</th>
            <th>Başlık 2</th>
            <th>Başlık 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alan 1</td>
            <td>Alan 1</td>
            <td>Alan 1</td>
            <td>Alan 2</td>
            <td>Alan 2</td>
            <td>Alan 2</td>
        </tr>
        <tr>
            <td>Alan 3</td>
            <td>Alan 3</td>
            <td>Alan 3</td>
            <td>Alan 4</td>
            <td>Alan 4</td>
            <td>Alan 4</td>
        </tr>        
    </tbody>
</table>

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (3)

serkankuyu

1487 gün önce

Demek istediğim resimdeki gibi;
A bloğuna mouse gidiyorsa blogda bulunan tüm sütunlar açık,
B bloğu ise blur olmalı. B blog içinde aynısı... Mouse yoksa blur olmamalı.

Ayrıca desteğin için teşekkürler.

https://i.hizliresim.com/CYif4w.jpg

#004148

serkankuyu

1487 gün önce

Demek istediğim resimdeki gibi;
A bloğuna mouse gidiyorsa blogda bulunan tüm sütunlar açık,
B bloğu ise blur olmalı. B blog içinde aynısı... Mouse yoksa blur olmamalı.

Ayrıca desteğin için teşekkürler.

https://i.hizliresim.com/CYif4w.jpg

#004147

tayfunerbilen

1487 gün önce

şöyle bir örnek olabilir;

table:hover td, table:hover th {
	filter: blur(2px);
}
td:hover {
	filter: blur(0) !important;
}

demo: https://codepen.io/tayfunerbilen/pen/YzpMEyy

eğer tüm satır normal olsun diğerleri blur olsun diyorsanda şöyle kullanabilirsin

tr:hover td {
	filter: blur(0) !important;
}

#004143