Bagaimana untuk menukar kursor kepada keadaan menunggu dalam JavaScript/jQuery?-tutorial js-php.cn

Bagaimana untuk menukar kursor kepada keadaan menunggu dalam JavaScript/jQuery?

WBOY

Lepaskan： 2023-08-30 11:29:06

ke hadapan

1314 orang telah melayarinya

如何在 JavaScript/jQuery 中将光标更改为等待状态？

Kita boleh menggunakan acara onmouseover dan onmouseout untuk menetapkan atau menukar kursor untuk memasuki keadaan menunggu. Dalam JavaScript, kami mempunyai pelbagai jenis acara tetikus yang melaksanakan fungsi berbeza pada tetikus. Mari lihat beberapa acara tetikus.

onmousedown - Peristiwa ini berlaku apabila butang tetikus ditekan pada elemen HTML
onmouseenter - Berlaku apabila penunjuk bergerak keluar dari elemen
onmousemove - Peristiwa ini berlaku apabila penuding bergerak ke atas elemen HTML
onmouseout - Berlaku apabila penunjuk meninggalkan elemen
onmouseover - Peristiwa ini berlaku apabila tetikus berada di atas elemen HTML.
onmouseup - Keluaran butang penunjuk pada elemen HTML

Acara onmouseover dan onmouseout digunakan apabila penunjuk meninggalkan elemen HTML. Acara onmouseover sangat serupa dengan acara onmouseenter, kecuali onmouseenter tidak menggelembung. Acara onmouseover tidak berfungsi dengan tag HTML - html, head, title, style, meta, base, bdo, br, iframe, param dan skrip.

Sifat

style.cursor digunakan untuk menetapkan atau mengembalikan jenis kursor yang ditunjukkan oleh penunjuk Apabila penunjuk berada di atas elemen, ia mengembalikan nilai rentetan yang mewakili kursor tetikus yang boleh dilihat. Automatik ialah nilai lalai. Ia tergolong dalam sifat Kursor JavaScript.

Tatabahasa

Berikut ialah sintaks untuk menukar kursor kepada keadaan menunggu dalam JavaScript -

document.getElementById('id').style.cursor = 'value';

Salin selepas log masuk

Parameter

Jenis nilai yang berbeza ditakrifkan untuk sifat gaya seperti alias, tatal penuh, auto, sel, menu konteks, silang, lalai, e-saiz, ew-saiz, alih, n-saiz, ne-saiz, baharu -ubah saiz, tiada, petunjuk, kemajuan dan warisan.

Nilai pulangan

Penunjuk berada di atas elemen dan nilai rentetan yang mewakili kursor tetikus yang dipaparkan dikembalikan.

Contoh

Dalam contoh ini, kami akan menukar kursor kepada keadaan menunggu dengan bantuan JavaScript.

<html>
<head>
   <style>
      #textbox {
         padding: 16px ;
         text-align: center;
         font-size: 18px;
         height: 90px;
         background-color: grey;
         width: 500px;
         color: white;
      }
   </style>
</head>
<body>
   <h2>Changing Cursor to Waiting State</h2>
   <p id="textbox" onmouseover="sampleFunction()">
      This is a sample program to see how to change the cursor appearance when the pointer is over an element
   </p>
   <script>
      function sampleFunction() {
         document.getElementById("textbox").style.cursor = "wait";
      }
   </script>
</body>
</html>

Salin selepas log masuk

Di sini kami menggunakan acara tetikus onmouseover untuk tanda perenggan dengan nama fungsi myFunction(). Untuk kaedah myFunction(), kami akan menggunakan objek "document.getElementById( )" untuk melaksanakan sifat style.cursor dan id akan mengambil "kotak" yang kami takrifkan elemen css. Nilai atribut kursor ialah "tunggu", yang bermaksud bahawa apabila kursor melayang di atas elemen HTML, kursor akan muncul dalam keadaan menunggu apabila ia muncul.

Contoh

Mari kita ambil contoh lain dan lihat cara menukar kursor kepada keadaan menunggu dalam JavaScript menggunakan acara tetikus yang berbeza.

<html>
<head>
   <style>
      #mybutton {
         cursor: default;
      }
   </style>
</head>
<body>
   <button id="mybutton">Hover over me</button>
   <script>
      document.getElementById("mybutton").onmouseover = function() {
         document.getElementById("mybutton").style.cursor = "wait";
      }
      document.getElementById("mybutton").onmouseout = function() {
         document.getElementById("mybutton").style.cursor = "default";
      }
   </script>
</body>
</html>

Salin selepas log masuk

Apabila tetikus melayang di atas elemen, penampilan kursor berubah kepada keadaan menunggu, seperti yang ditunjukkan dalam gambar di bawah -

Contoh

Dalam contoh ini, kita akan melihat cara menukar kursor kepada keadaan menunggu dengan bantuan jQuery.

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
   </script>
   <style>
      #event {
         height: 50px;
         padding: 30px;
         height: 60px;
         margin: 2 auto;
         color: white;
         width: 650px;
         background: grey;
      }
      #center {
         text-align:center;
      }
   </style>
</head>
<body id="center">
   <h2>Changing the Cursor Appearance</h2>
   <div id = "event">
      Mouse Hover
   </div>
   <script>
      $("#event").hover(function() {
         $(this).css("cursor", "progress");
      }, function() {
         $(this).css("cursor", "default");
      });
   </script>
</body>
</html>

Salin selepas log masuk

Apabila tetikus melayang di atas elemen, penampilan kursor berubah kepada keadaan menunggu, seperti yang ditunjukkan dalam rajah di bawah -

Apabila tetikus meninggalkan elemen, penampilan kursor kembali kepada nilai lalai, seperti yang ditunjukkan dalam gambar -

Seperti yang dapat kita lihat dalam contoh, di sini kita menggunakan "$(ini).css("kursor", "kemajuan")" untuk menukar keadaan kursor kepada kemajuan elemen div Kami menetapkan ini dalam atur cara . Untuk menukar kursor kembali kepada keadaan lalainya, anda boleh menetapkan sifat kursor kepada lalai "$(ini).css("kursor", "lalai"".

Dalam artikel ini, kami menerangkan cara menukar kursor kepada keadaan menunggu dengan contoh. Kami melihat dua contoh berbeza di sini, dalam contoh pertama kami menggunakan acara onmouseover untuk menukar keadaan kursor. Dalam contoh kedua, kami menggunakan acara onmouseover dan onmouseout untuk menukar kursor ke dalam keadaan menunggu. Untuk kedua-dua contoh dalam JavaScript, kami menggunakan sifat style.cursor untuk menentukan nilai kursor. Untuk contoh ketiga, kami menggunakan jQuery untuk menukar penampilan kursor melalui sifat kursor jQuery.

Atas ialah kandungan terperinci Bagaimana untuk menukar kursor kepada keadaan menunggu dalam JavaScript/jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!