如何为下拉列表中的每个项目添加图片?

htmlcssweb developmentfront end technology更新于 2025/1/13 15:40:17

创建带有图片的下拉列表是提升网站或应用程序视觉吸引力和用户友好度的绝佳方法。本文将逐步演示如何使用 HTML 和 CSS 为下拉列表中的每个项目添加图片。

方法

我们将逐步讲解如何创建包含必要元素的 HTML 文件，使用 CSS 设置这些元素的样式和位置，以及使用 :hover 选择器在用户与元素交互时更改元素的外观。读完本文后，您将对如何为下拉列表中的每个项目添加图片有深入的理解，并获得一个可供参考的实用示例。

语法

我们实现此操作的简单语法如下:-

.drop-content a:hover {
/* 样式在这里 */
}

示例

以下是使用 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 的示例图标进行演示。