CSS 如何给每个项目添加图像到下拉列表中

创建带有图像的下拉列表可以使您的网站或应用程序更具视觉吸引力和用户友好性。在本文中，我们将逐步介绍如何使用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的示例图标来进行演示。