Bagaimana untuk Mengubah Kandungan pada Hover Hanya Menggunakan CSS?

Cara Menukar Kandungan pada Tuding

Pengenalan

Kesan Tuding ialah teknik biasa yang digunakan untuk memberikan maklumat tambahan atau menarik perhatian kepada elemen pada sesuatu laman web. Artikel ini meneroka kaedah yang mudah tetapi berkesan untuk menukar kandungan elemen apabila kursor tetikus melayang di atasnya hanya menggunakan CSS.

Pernyataan Masalah

Matlamatnya adalah untuk menukar kandungan " BARU" labelkan kepada "TAMBAH" apabila kursor tetikus melayang di atasnya. Ini harus dicapai semata-mata melalui CSS tanpa menggunakan JavaScript atau mana-mana perpustakaan tambahan.

Harta Kandungan CSS untuk Menyelamat

Harta kandungan CSS, diperkenalkan bersama dengan ::selepas dan ::sebelum pseudo- elemen, menyediakan cara untuk mengubah suai kandungan elemen. Mari gunakan harta ini untuk menyelesaikan masalah kita:

Penyelesaian

1. Sembunyikan kandungan asal pada tuding:

<code class="css">.item:hover a p.new-label span {
  display: none;
}</code>

Peraturan ini menggunakan paparan: tiada harta untuk menyembunyikan elemen yang mengandungi kandungan "BARU" apabila kursor tetikus melayang di atas .item.

2. Paparkan kandungan baharu menggunakan ::after:

<code class="css">.item:hover a p.new-label:after {
  content: 'ADD';
}</code>

Pseudo- elemen ::after digunakan untuk memasukkan kandungan "TAMBAH" selepas elemen .new-label apabila ia berada dalam keadaan tuding. Sifat kandungan menentukan kandungan baharu.

Kod Kemas Kini

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

.item:hover a p.new-label:after {
  content: 'ADD';
}
</code>

Kesimpulan

Dengan menggabungkan sifat kandungan dengan kesan tuding, kami telah berjaya melaksanakan penyelesaian yang mudah dan elegan untuk menukar kandungan pada tuding menggunakan CSS tulen. Teknik ini boleh digunakan secara meluas dan boleh digunakan untuk meningkatkan interaksi pengguna dan menyediakan maklumat tambahan dalam cara yang dinamik dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Kandungan pada Hover Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!