資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在每個下拉列表項中新增圖片？
建立帶有圖片的下拉列表是使您的網站或應用程式更具視覺吸引力和使用者友好的好方法。在本文中，我們將逐步介紹如何使用HTML和CSS向下拉列表中的每個專案新增圖片。
方法
我們將逐步介紹如何建立一個包含必要元素的HTML檔案，使用CSS來設定和定位這些元素，並使用:hover選擇器來更改使用者與這些元素互動時的外觀。在本文結束時，您將深入瞭解如何在下拉列表中的每個專案中新增圖片，並將有一個可參考的實際示例。
語法
我們將使用以下簡單的語法來實現這一點：
.drop-content a:hover {
/* styles here */
}
示例
以下是如何使用HTML和CSS向下拉列表中的每個專案新增圖片的逐步示例。
步驟1 - 建立一個HTML檔案，其中包含一個按鈕元素（用作下拉按鈕）和一個div元素（用於容納下拉內容）。在div元素中，為下拉列表中的每個專案建立錨元素，並使用“img”標籤向每個錨元素新增圖片。這是一個HTML程式碼示例：
<!DOCTYPE html>
<html>
<head>
<title>Adding image to drop list</title>
</head>
<body>
<center>
<h1 style="color: blue">Tutorials Point</h1>
<div class="drop">
<button class="btn">Cars</button>
<div class="drop-content">
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/2330/2330453.png" width="30" height="25" /> Mercedes</a>
<a href="#"> <img src="https://cdn-icons-png.flaticon.com/128/741/741407.png" width="30" height="25" /> Benz</a>
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/744/744465.png" width="30" height="25" /> Lamborghini</a>
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/1048/1048313.png" width="30" height="25" /> Porsche</a>
</div>
</div>
</center>
</body>
</html>
步驟2 - 使用CSS來設定按鈕元素和包含下拉內容的div元素的樣式。在這個示例中，我們使用CSS來更改按鈕元素的背景顏色，為按鈕元素新增填充，並更改字型大小。這是一個CSS程式碼示例：
btn {
background-color: blue;
color: red;
padding: 16px;
font-size: 16px;
order: none;
cursor: pointer;
}
.drop {
position: relative;
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(232, 225, 225, 0.2);
z-index: 1;
}
步驟3 - 使用CSS來設定包含下拉選項的圖片和文字的錨元素的樣式。在這個示例中，我們使用CSS來更改文字顏色，為錨元素新增填充，並更改文字裝飾。這是一個CSS程式碼示例：
.drop-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
步驟4 - 使用:hover選擇器來更改使用者懸停在其上時錨元素的背景顏色。在這個示例中，我們使用:hover選擇器在使用者懸停在錨元素上時將背景顏色更改為黑色。這是一個CSS程式碼示例：
.drop-content a:hover {
background-color: black;
}
步驟5 - 使用CSS來設定使用者懸停在其上時下拉按鈕和下拉選單的樣式。在這個示例中，我們使用CSS在使用者懸停在其上時將按鈕的背景顏色更改為藍色，並在使用者懸停在按鈕上時顯示下拉選單。這是一個CSS程式碼示例：
.drop:hover .drop-content {
display: block;
}
.drop:hover .btn {
background-color: blue;
}
步驟6 - 這是index.html檔案中的完整程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Adding image to drop list</title>
<style>
.btn {
background-color: blue;
color: red;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.drop {
position: relative;
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(232, 225, 225, 0.2);
z-index: 1;
}
drop-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.drop-content a:hover {
background-color: black;
}
.drop:hover .drop-content {
display: block;
}
.drop:hover .btn {
background-color: blue;
}
</style>
</head>
<body>
<center>
<h1 style="color: blue">Tutorials Point</h1>
<div class="drop">
<button class="btn">Cars</button>
<div class="drop-content">
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/2330/2330453.png" width="30" height="25" /> Mercedes</a>
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/741/741407.png" width="30" height="25" /> Benz</a>
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/744/744465.png" width="30" height="25" /> Lamborghini</a>
<a href="#">
<img src="https://cdn-icons-png.flaticon.com/128/1048/1048313.png" width="30" height="25" /> Porsch</a>
</div>
</div>
</center>
</body>
</html>
注意 - 在這裡，我們出於演示目的使用了來自flaticon的示例圖示。
結論
在本文中，我們學習瞭如何使用不同的CSS屬性和HTML元素向下拉列表的每個專案中新增圖片。我們主要關注了:hover屬性，它允許下拉列表出現並在下拉列表中列出圖示。我們可以使用簡單的HTML和CSS元素和屬性來實現網頁中的這些自定義設計。
7000+ 次瀏覽
