Membuat pilihan lungsur turun yang menampilkan imej dan bukannya teks boleh terbukti mencabar. Walaupun kotak kombo jQuery telah dicadangkan, ia bergantung pada penyediaan pilihan teks yang disertakan dengan imej. Untuk menggantikan teks sepenuhnya dengan imej, pendekatan berbeza diperlukan.
Penyelesaian CSS Pintar
Untuk kes penggunaan khusus ini, di mana imej mewakili ketebalan garisan dalam talian apl lukisan, tiada JavaScript diperlukan. Sebaliknya, kita boleh memanfaatkan butang radio dan CSS untuk mencipta kesan yang diingini.
Struktur HTML
<div>
Penggayaan CSS
#image-dropdown { border: 1px solid black; width: 200px; height: 50px; overflow: hidden; transition: height 0.1s; } #image-dropdown:hover { height: 200px; overflow-y: scroll; transition: height 0.5s; } #image-dropdown input { position: absolute; top: 0; left: 0; opacity: 0; } #image-dropdown label { display: none; margin: 2px; height: 46px; opacity: 0.2; background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%; } #image-dropdown:hover label { display: block; } #image-dropdown input:checked + label { opacity: 1 !important; display: block; }
Bagaimana Ia Berfungsi
Helahnya terletak pada mengaitkan label dengan butang radio menggunakan atribut "untuk" dan "id". Apabila label diklik, butang radio yang sepadan diaktifkan. Penggayaan CSS memastikan bahawa:
Dengan memperuntukkan imej latar belakang pada label, pilihan lungsur turun muncul sebagai imej. Pendekatan ini berkesan menggantikan teks dengan imej, mencapai kefungsian yang diingini tanpa JavaScript.
Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat menu lungsur turun yang memaparkan imej dan bukannya teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!