Css - Table alanlarını hover'a göre blur yapmak
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>
şö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;
}