Saya menggunakan elemen semu :before untuk membuat animasi hover batas bawah untuk tautan navigasi saya:

a {
  display: inline-block;
  padding: 20px 0px;
  margin: 0px 10px;
  position: relative;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  background-color: #f5f5f5;
}

a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0px;
  border-bottom: 2px solid black;
  bottom: 12px;
  transform-origin: bottom left;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform: 0.2s ease-out;
}

a:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>

Kode yang dapat dijalankan di atas tidak memiliki masalah ini tetapi di situs web saya, batas tebal 2 px dari elemen semu memblokir tautan menu dan mengubah kursor ke panah default. Jika pengguna salah mengklik di batas bawah, tautan menu tidak berfungsi, yang menimbulkan kebingungan. Dan setiap kali Anda mengarahkan kursor melewati perbatasan, kursor berubah dengan cepat, yang membuat menu navigasi tampak bermasalah.

Berikut rekaman layarnya: https://streamable.com/gk9yir

Bagaimana saya bisa memperbaiki ini?

0
JOKKER 16 Maret 2021, 16:09

2 jawaban

Jawaban Terbaik

Abaikan saja pointer di elemen semu

a:before {pointer-events:none;...
2
Nikolay 16 Maret 2021, 13:27

Gunakan box-shadow sebagai gantinya:

a {
  display: inline-block;
  padding: 20px 0px;
  margin: 0px 10px;
  position: relative;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  background-color: #f5f5f5;
}

a:before {
  content: '';
  position: absolute;
  margin-left:1px;
  width: calc(100% - 2px);
  height: 0px;
  box-shadow:0 0 0 1px #000;
  bottom: 12px;
  transform-origin: bottom left;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
  transition: transform: 0.2s ease-out;
}

a:hover:before {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>

Ini harus memperbaikinya karena bayangan tidak mengambil fokus mouse.

1
Riedler 16 Maret 2021, 13:19