如何使用HTML/CSS实现菜单悬停时显示对应专属图标

调整说明 #

你现有的代码已经实现了首页项的悬停图标效果，只需要统一调整菜单项基础样式避免文字和图标重叠，再为其余菜单项补充对应悬停图标配置即可：

1. 为基础菜单项样式增加左侧内边距，预留图标显示空间
2. 统一配置背景图的位置、大小，保证显示效果一致
3. 为每个菜单项类单独配置悬停状态的背景图路径

完整修改后CSS代码 #

.nav{
    background-color: #4f9b30;
}

.nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 14px 14px 36px; /* 左侧多留空间放图标，可自行调整数值 */
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
  /* 统一背景图公共配置 */
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px 16px; /* 图标显示尺寸，按需调整 */
}
.nav a:hover {
  background-color: #ff5c00;
  color: black;
}

/* 每个菜单项单独配置悬停图标，替换括号内为你自己的本地图标文件路径 */
.home:hover{
    background-image: url(./icons/home.png);
}
.ran:hover{
    background-image: url(./icons/iran.png);
}
.blog:hover{
    background-image: url(./icons/blog.png);
}
.services:hover{
    background-image: url(./icons/about.png);
}
.news:hover{
    background-image: url(./icons/news.png);
}
.event:hover{
    background-image: url(./icons/event.png);
}
.invest:hover{
    background-image: url(./icons/invest.png);
}
.contact:hover{
    background-image: url(./icons/contact.png);
}

可选优化方案 #

如果担心背景图和悬停背景色冲突，可以改用伪元素实现图标：

.nav a {
  position: relative;
  /* 其余原有样式不变，保留左侧padding设置 */
}
.nav a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  display: none;
  background-size: cover;
}
.nav a:hover::before {
  display: block;
}
/* 每个菜单项单独配置before的背景图 */
.home:hover::before {
  background-image: url(./icons/home.png);
}

HTML代码不需要做任何修改，直接沿用你现有代码即可。

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