Bagaimanakah saya boleh membuat menu lungsur turun yang memaparkan imej dan bukannya teks?

Memaparkan Imej dalam Pilihan Jatuh Turun

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>
<p><strong>Penggayaan CSS</strong></p>
<pre class="brush:php;toolbar:false">#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:

• Dalam keadaan runtuh, hanya label butang radio yang dipilih kelihatan.
• Apabila menu lungsur dikembangkan (di tuding), semua label dipaparkan.
• Label yang mengikuti butang radio yang disemak kekal kelihatan walaupun dalam butang yang runtuh nyatakan.

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.