简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Tajuk yang ditulis semula ialah: Tukar tajuk senarai sebagai tindak balas kepada kursor yang bergerak ke elemen senarai
P粉131455722
P粉131455722 2023-09-04 23:54:54
0
1
448
<p>Saya sedang mencipta jadual terpaut dan saya mahu menjadikan jadual itu lebih cantik dengan menukar warna latar belakang pengepala jadual apabila saya menggerakkan tetikus saya ke atas salah satu pautan senarai. Walau bagaimanapun, saya tidak tahu bagaimana untuk menukar sifat unsur kontena dengan menjejaskan unsur yang lebih kecil. Ini kod saya: </p> <pre class="brush:php;toolbar:false;"><html lang="vi"> <kepala> <gaya> .toc-container { lebar maksimum: 600px; font-family: "Roboto", sans-serif; latar belakang: #deff9d; jejari sempadan: 8px; bayang-kotak: 0 4px 11px rgba(0, 0, 0, 0.6); } .toc-container h2.index-heading { text-transform: huruf besar; berat fon: normal; jidar: 0 16px; padding-top: 16px; } .isi kandungan { gaya senarai: tiada; padding: 0; } .jadual-kandungan li.pengarang li.blog { latar belakang: #222; peralihan: 400ms; gaya senarai: tiada; } .jadual-kandungan li.pengarang{ warna latar belakang: hijau; } .jadual-kandungan li.pengarang li:nth-of-type(even).blog { latar belakang: #2e2e2e; } .jadual-kandungan li.pengarang li:hover.blog { latar belakang: #000; } .jadual-kandungan li a { hiasan teks: tiada; warna: #fff; jidar-kiri: 24px; pelapik: 16px 0; paparan: blok; } </style> </head> <badan> <div class="toc-container"> <h2 class="indeks-tajuk">tajuk</h2> <ul class="jadual-kandungan"> <li class="pengarang"> <a href="#">Nama pengarang</a> <ul> <li class="blog"> <a href="#">Bahagian 1</a> </li> </ul> </li> </ul> </div> </badan> </html></pre>
P粉131455722
P粉131455722

membalas semua(1)
P粉343408929
P粉3434089292023-09-05 14:12:54 Tingkat 1

Saya rasa ini lebih mudah dicapai menggunakan JavaScript, anda boleh menggunakan acara elemen mouseenter 和 mouseleave untuk mencapai perubahan gaya, mungkin ini boleh membantu anda. Ini kodnya: 

  <script>
    const headerDiv = document.querySelector('.index-heading');
    const blogDiv = document.querySelector('.blog');
    blogDiv.addEventListener('mouseenter', function(e) {
      headerDiv.style.background = 'purple'
    })
    blogDiv.addEventListener('mouseleave', function(e) {
      headerDiv.style.background = '#deff9d'
    })
  </script>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！