Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?
Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?
- WBOYke hadapan
- 2023-08-22 12:25:06782semak imbas
Seperti yang anda tahu, teknologi skrin sentuh tidak menyokong tingkah laku :hover. oleh itu, Apabila membuat tapak web responsif, anda harus mempertimbangkan dengan teliti bila dan tempat untuk digunakan : interaksi tuding. Sesetengah peranti skrin sentuh akan kehilangan kesan hover pautan mudah Buka URL. Anda akan melihat gaya :hover untuk jangka masa yang singkat sebelum halaman berubah Pada iOS, kerana :hover diaktifkan sebelum acara klik
Ini adalah isu kecil yang tidak memberi kesan kepada kefungsian tapak. Berikut ialah: hover, which Sama ada gunakan ciri CSS paparan atau keterlihatan untuk menunjukkan atau menyembunyikan elemen lain, ya Masalah sebenar.
Ada dua kaedah yang boleh anda gunakan untuk menyelesaikan masalah ini.
Peranti tanpa JavaScript - Anda boleh menggunakan fungsi pertanyaan media CSS untuk membetulkannya. Peranti yang menyokong ciri ini hover dirujuk dengan syarat "hover: hover". Menambahkan CSS berikut hanya pada peranti tersebut Menggunakan pertanyaan media bersama-sama dengan syarat ini dijamin.
Coretan kod
@media(hover: hover) {
#btn:hover {
background-color: #ccf6c8;
}
}
Terjemahan bahasa Cina bagi Contoh 1
ialah:Contoh 1
Ini hanya menambah kesan tuding untuk peranti yang menyokong tuding; tiada kesan tuding untuk peranti sentuh. wujud Dalam kes ini, warna latar belakang butang berubah apabila tetikus dituding di atasnya. Pada peranti sentuh, ada Tiada kesan hover, jadi butang kekal dalam keadaan asalnya.
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myButton {
background-color: #096381;
margin: 3%;
font-size: 30px;
color: #fff;
}
@media (hover: hover) {
#myButton:hover {
/*On devices that support hover, add a hover effect to the button.*/
background-color: #0a92bf;
}
}
</style>
</head>
<body>
<h2>Welcome to TutorialsPoint!</h2>
<p>Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
<button type="button" id="myButton">
Submit
</button>
</body>
</html>
Kod di atas akan menghasilkan output berikut: Ini adalah hasil pada skrin bukan sentuh.
Langkah kedua menggunakan JavaScript - Dalam kaedah ini fungsi JavaScript berikut akan digunakan untuk menyemak Sama ada kita menggunakan peranti sentuh atau tidak. Setiap kali pengguna menyentuh elemen, Respons acara ontouchstart mengembalikan nilai sebenar. Bilangan maksimum titik sentuh berturut-turut yang disokong oleh peranti dikembalikan oleh navigator.maxTouchPoints.
Ciri yang disokong oleh peranti ini dikembalikan oleh navigator.maxTouchPointsDalam navigator.msMaxTouchPoints, fungsi yang sama tersedia di bawah awalan vendor "ms" Menyasarkan IE 10 dan pelayar terdahulu. Oleh itu, jika peranti menyokong fungsi sentuhan, yang ditentukan fungsi kembali benar.
Coretan kod
function is_touch_enabled() {
return ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0);
}
Contoh 2
diterjemahkan sebagai:Contoh 2
Dalam contoh ini, mari lihat bagaimana kita boleh menambah kelas pada butang kita jika fungsi sentuhan tidak didayakan. Seperti yang ditunjukkan di bawah:Dalam kod di bawah, kelas ini menyediakan kesan tuding untuk butang dalam CSS −
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myButton {
background-color: #096381;
margin: 3%;
font-size: 30px;
color: #fff;
}
.myButton2:hover {
background-color: #0a92bf !important;
/*The myButton2 class now has a hover effect.*/
}
</style>
</head>
<body onload="touchHover()">
<p>TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. <br>You will have to register with us to avail these premium services.</p>
<button type="button" id="myButton">Submit</button>
<script>
function touchHover() {
function is_touch_enabled() {
// Verify that touch is turned on
return "ontouchstart" in window || navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
}
if (!is_touch_enabled()) {
// Add the "myButton2" class if touch is not enabled.
let verifyTouch = document.getElementById("myButton");
verifyTouch.classList.add("myButton2");
}
}
</script>
</body>
</html>
Kod di atas akan menghasilkan output berikut: Ini adalah hasil pada peranti bukan sentuh.
Memandangkan tiada kesan tuding pada peranti sentuh, butang kekal dalam keadaan asalnya.
Atas ialah kandungan terperinci Bagaimana untuk mengelakkan kesan tuding melekit untuk butang pada peranti sentuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!