数据结构
网络
关系数据库管理系统 (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+ 次浏览
