Bagaimana untuk menambah sempadan pada elemen pada tetikus menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menambah sempadan pada elemen pada tetikus menggunakan CSS?

WBOY

Lepaskan： 2023-09-15 14:33:03

ke hadapan

1492 orang telah melayarinya

如何使用 CSS 在鼠标悬停时向元素添加边框？

CSS menyediakan pembangun dengan kebolehan berkuasa untuk menyesuaikan dan menggayakan halaman mereka seperti yang mereka mahu. Salah satu daripada banyak ciri yang ditawarkan untuk membolehkan tahap penyesuaian ini ialah keupayaan untuk menambah interaktiviti pada elemen web. Kesan tuding boleh memberikan pengalaman pengguna yang lebih dinamik. Dengan menggunakan sempadan pada elemen pada tetikus, pengguna mendapat isyarat visual bahawa mereka telah berinteraksi dengan elemen tersebut.

Tatabahasa

selector:hover {
   /* CSS property and values to be applied on hover */
}

Salin selepas log masuk

: Pemilih tuding

Pemilih :hover dalam CSS digunakan untuk menggunakan gaya pada elemen apabila kursor tetikus melayang di atasnya.

Di sini, pemilih merujuk kepada elemen yang gaya akan digunakan apabila tetikus dilegarkan di atasnya.

Kaedah

Dengan CSS, mudah untuk menambah sempadan pada elemen pada tetikus. Kami akan menggunakan pemilih :hover yang dinyatakan di atas untuk mengakses elemen pada hover. Kami akan menambah sifat sempadan pada elemen untuk menambah sempadan padanya apabila ia dilegar.

Contoh

Bahagian HTML berikut terdiri daripada bertindak sebagai bekas, di mana tiga

elemen hadir. Teg

ini bertindak sebagai elemen yang kemudiannya kami akan menggunakan kesan tuding menggunakan CSS.

Bercakap tentang bahagian CSS kedua, kami menggunakan bahagian CSS untuk menambah beberapa penggayaan pada halaman web. Kami menggunakan pemilih :hover. Kami menetapkan peraturan gaya di sana supaya apabila pengguna menuding pada mana-mana elemen

, jidar akan muncul di sekeliling elemen tersebut.

<!DOCTYPE html>
<html>
<head>
   <title>How to add border to an element on mouse hover using CSS?</title>
   <style>
      p:hover{
         padding: 2px;
         border: 2px solid black;
      }
   </style>
</head>
<body>
   <h4>How to add border to an element on mouse hover using CSS?</h4>
   <div>
      <p>Element 1</p>
      <p>Element 2</p>
      <p>Element 3</p>
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Akhir sekali, memanfaatkan CSS untuk memasukkan garis besar ke dalam komponen pada tetikus ialah cara yang mudah dan berkesan untuk meningkatkan daya tarikan visual tapak web anda dan penglibatan pengguna. Dengan menyepadukan ciri ini, tukang dan pengaturcara boleh mencipta pengalaman menyemak imbas yang lebih menarik dan kolaboratif untuk pengguna. Tambahan pula, kebolehsuaian CSS membolehkan pemperibadian dan percubaan dengan gaya garis besar dan tera yang berbeza. Dengan sedikit kepandaian dan keaslian, kemungkinan untuk mencipta corak yang tiada tandingan dan hebat adalah tidak berkesudahan. Secara keseluruhannya, tutorial ini menyediakan manual yang komprehensif tentang cara mencapai hasil ini, dan dengan sedikit latihan, sesiapa sahaja boleh menguasai teknik CSS yang luar biasa tetapi memberi kesan ini.

Atas ialah kandungan terperinci Bagaimana untuk menambah sempadan pada elemen pada tetikus menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!