如何为无序列表设置自定义符号并在hover时替换为指定图片？

Hey there! I see you're just starting out with HTML & CSS, and you want to swap those default list bullets for custom images that switch when you hover. Let's walk through a clean, easy-to-implement solution for this:

Step 1: Move styles to a dedicated CSS block #

First, let's ditch the inline style on your <ul> and use a <style> section (or external CSS file) instead. This makes it way simpler to add hover effects and keep your code organized.

Step 2: Add custom icons and hover state #

We'll use background-image on each <li> to set your default icon, then tweak padding and background positioning so text doesn't overlap the image. Finally, we'll add a :hover state to swap the icon when the user mouses over a list item.

Here's the full working code example:

<!DOCTYPE html>
<html>
<head>
<style>
  .custom-icon-list {
    list-style-type: none; /* Your existing bullet removal */
    padding-left: 0; /* Optional: removes default ul padding for cleaner alignment */
  }

  .custom-icon-list li {
    background-image: url('default-coffee-icon.png'); /* Replace with your default icon path */
    background-repeat: no-repeat;
    background-position: left center; /* Aligns icon vertically with text */
    padding-left: 30px; /* Adjust based on your icon's width—gives space for the icon */
    margin: 8px 0; /* Optional: adds spacing between list items */
    cursor: pointer; /* Optional: changes cursor to pointer on hover */
  }

  .custom-icon-list li:hover {
    background-image: url('hover-coffee-icon.png'); /* Replace with your hover icon path */
  }
</style>
</head>
<body>
<ul class="custom-icon-list">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

Quick breakdown of key styles: #

• background-repeat: no-repeat: Stops the icon from repeating if it's smaller than the list item.
• background-position: left center: Ensures the icon stays perfectly aligned with your list text vertically.
• padding-left: This is critical—set it to a value slightly larger than your icon's width so text doesn't sit on top of the image.
• Image paths: Swap the placeholder paths (default-coffee-icon.png and hover-coffee-icon.png) with the actual local paths or hosted URLs for your chosen icons.

Just plug this in, update the image paths, and you'll have exactly the hover effect you're aiming for!

内容的提问来源于stack exchange，提问作者KashyapVadi