Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan gaya kursor ke penunjuk pautan tanpa href?
Bagaimana untuk menetapkan gaya kursor ke penunjuk pautan tanpa href?
- 王林ke hadapan
- 2023-08-24 12:13:02558semak imbas
Kita boleh menggunakan teg dalam HTML untuk menambah pautan ke halaman web. Gaya kursor lalai untuk elemen ialah penunjuk, tetapi mengalih keluar atribut href daripada teg mengubah gaya kursor.
Jadi, dalam tutorial ini, kita akan belajar untuk mengekalkan gaya kursor sebagai penunjuk bertanda tanpa atribut href.
Pengguna boleh mengikuti contoh di bawah untuk melihat gaya kursor lalai elemen
Contoh
Dalam contoh di bawah, kami menggunakan teg untuk membuat tiga pautan berbeza.
Dalam output, kita boleh perhatikan bahawa apabila kita mengarahkan tetikus pada pautan pertama, kursor menjadi penunjuk kerana ia mengandungi atribut href untuk pautan kedua, kursor juga menjadi penunjuk kerana ia Juga mengandungi atribut href dengan nilai rentetan kosong dan apabila kita menuding pada pautan ketiga, gaya kursor berubah kerana ia tidak mengandungi atribut href.
<html> <body> <h2>Cursor pointer on the anchor texts</h2> <a href = "https://www.tutorialspoint.com/index.htm"> tutorialspoint</a> <br> <br> <a href = ""> Cursor pointer </a> <br> <br> <a> No cursor pointer </a> </body> </html>
Kini pengguna memahami cara gaya kursor berubah apabila kami mengalih keluar atribut href daripada teg .
Di bawah, kita akan melihat contoh menetapkan penuding kursor untuk pautan tanpa atribut href.
Tatabahasa
Pengguna boleh mengikuti sintaks di bawah dan menggunakan css untuk menetapkan penuding kursor kepada pautan tanpa atribut href.
<style>
.pointer {
cursor: pointer;
}
</style>
Dalam sintaks di atas, "penunjuk" ialah kelas yang diberikan kepada elemen , dan kami menukar gaya penuding elemen yang mengandungi kelas "penunjuk".
Contoh
Dalam contoh di bawah, kami mencipta dua elemen berbeza dan menetapkan kelas "penunjuk" kepada kedua-dua elemen. Dalam bahagian , kami menambah gaya sebaris untuk halaman web. Kami mengakses kelas "penunjuk" dalam teg
<html>
<head>
<style>
.pointer {
cursor: pointer;
}
</style>
</head>
<body>
<h2>Using the CSS to set the cursor pointer on the anchor texts in the link without the href attribute </h2>
<a class = "pointer"> cursor pointer </a>
<br> <br>
<a class = "pointer"> No href attribute </a>
</body>
</html>
Contoh
Dalam contoh di bawah, kami menggunakan gaya "kursor:penunjuk" untuk menggayakan kursor bagi elemen tanpa atribut href kepada penuding, seperti yang ditunjukkan dalam Contoh 2, tetapi kami telah menggunakan CSS sebaris pada teg .
<html> <body> <h3>Using the inline CSS to set cursor pointer on the anchor texts in the link without the href attribute. </h3> <a style = "cursor: pointer;"> cursor pointer </a> </body> </html>
Contoh
Dalam contoh di bawah, kami menggunakan atribut acara "onmouseover". Setiap kali penuding tetikus bergerak ke atas tanda , ia memanggil fungsi panggil balik yang diberikan kepadanya. Di sini, bukannya memberikan fungsi panggil balik, kami menetapkan baris CSS.
Jadi apabila pengguna menuding pada teg tanpa atribut href, gaya kursor akan ditetapkan kepada penuding.
<html> <body> <h3>Using the onmouseover event and css to add cursor pointer on the anchor texts in the link without herf attribute </h3> <a onmouseover = "this.style.cursor='pointer'"> Link 1 </a> <br> <a onmouseover = "this.style.cursor='pointer'"> Link 2 </a> <br> <a onmouseover = "this.style.cursor='pointer'"> Link 3 </a> <br> <a onmouseover = "this.style.cursor='pointer'"> Link 4 </a> <br> </body> </html>
Contoh
Dalam contoh di bawah, kami telah menggunakan teg dengan atribut href, tetapi kami telah menetapkan rentetan kosong sebagai nilai atribut href. Oleh itu, ia secara automatik bertindak sebagai pautan nol dan menetapkan penunjuk kursor untuk teg .
<html> <body> <h3>Assigning the empty value to the href attribute to add cursor pointer </i> on the anchor texts</h3> <a href = ""> Link 1 </a> <br> <a href = ""> Link 2 </a> <br> </body> </html>
Dalam tutorial ini, kami belajar cara menggayakan kursor sebagai penunjuk pada pautan tanpa atribut href. Kami menggunakan CSS untuk menukar gaya kursor. Selain itu, kami menggunakan atribut acara onmouseover untuk mengesan peristiwa over mouse dan menukar gaya kursor dengan sewajarnya.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya kursor ke penunjuk pautan tanpa href?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!