Html 悬停时显示菜单文本

我正在尝试为我的国家列表创建一个带有国旗图像的菜单，当用户将鼠标悬停在这些国家的国旗菜单上时，被悬停的图像将右边空白并显示国家名称

我不知道在悬停时如何在国旗右侧显示国家名称

见演示

li.fa-usa a、li.fa-uk a、li.fa-西班牙a{
显示：块；
背景重复：无重复；
宽度：60px；
高度：50px；
字体大小：0px；
背景尺寸：50px；
}
菜单国家菜单a：悬停{
右边距：40px；
/*文本缩进：50px！重要*/
字号：26px；
}
li.fa-usa，li.fa-uk，li.fa-spain{浮动：左；}
li.fa-usa{
背景图像：url（'https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png');
}
li.fa-uk a{
背景图像：url（'https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png');
}
西班牙a{
背景图像：url（'https://cdn.countryflags.com/thumbs/spain/flag-round-250.png')
}
ul#菜单国家/地区菜单{
列表样式类型：无；
填充：0px；
显示：内联块；
边缘顶部：20px；
}
.菜单项对象办公室{
显示：内联块；
}

您可以使用Javascript实现这一点

document.getElementById('menu-item-211').addEventListener("mouseover", function(){

    this.style.textIndent = '50px';

});

---

只需修改hover类，使用下面的代码而不是旧代码

ul#menu-countries-menu a:hover{
  /* text-indent:50px !important; */
  font-size:26px;
  text-align:right; 
  width:110px;
  margin-right:10px;
}

或

示例代码段

li.fa-usa a、li.fa-uk a、li.fa-西班牙a{
显示：块；
背景重复：无重复；
宽度：60px；
高度：50px；
字体大小：0px；
背景尺寸：50px；
}
菜单国家菜单a：悬停{
/*文本缩进：50px！重要*/
字号：26px；
文本对齐：右对齐；
宽度：110px；
右边距：10px；
}
li.fa-usa，li.fa-uk，li.fa-spain{浮动：左；}
li.fa-usa{
背景图像：url（'https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png');
}
li.fa-uk a{
背景图像：url（'https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png');
}
西班牙a{
背景图像：url（'https://cdn.countryflags.com/thumbs/spain/flag-round-250.png')
}
ul#菜单国家/地区菜单{
列表样式类型：无；
填充：0px；
显示：内联块；
边缘顶部：20px；
}
.菜单项对象办公室{
显示：内联块；
}

在css中，您对“ul#menu countries menu a:hover”的文本缩进属性进行了注释。我认为，取消注释文本缩进：50px将解决您的问题。

ul#menu-countries-menu a:hover{
  margin-right:40px;
   text-indent:50px !important;
  font-size:26px;
}