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

创建一个带有图片的下拉列表，可以使你的网站或应用程序更具有视觉吸引力和用户友好。在这篇文章中，我们将通过一个逐步的例子来说明如何使用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来改变按钮元素的背景颜色，给按钮元素加一个padding，并改变字体大小。下面是一个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 的样本图标进行演示。