悬停时显示菜单文本答案

【问题标题】：Displaying the menu text when hovered悬停时显示菜单文本
【发布时间】：2023-03-18 07:49:01
【问题描述】：

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

我不确定悬停时如何在国旗右侧显示国家名称。

    li.fa-usa a, li.fa-uk a, li.fa-spain a{
      display: block;
      background-repeat: no-repeat;
      width: 60px;
      height: 50px;
      font-size:0px;
      background-size: 50px;
    }
    
    ul#menu-countries-menu a:hover{
      margin-right:40px;
      /* text-indent:50px !important; */
      font-size:26px;
    }
    
    li.fa-usa, li.fa-uk, li.fa-spain{float:left;}
    li.fa-usa a{
      background-image:url('https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png');
    
    }
    li.fa-uk a{
    background-image:url('https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png');
    }
    
    li.fa-spain a{
      background-image: url('https://cdn.countryflags.com/thumbs/spain/flag-round-250.png')
    }
    
    ul#menu-countries-menu{
      list-style-type:none;
      padding:0px;
      display:inline-block;
      margin-top: 20px;
    }
    
    .menu-item-object-office{
      display: inline-block;
    }

    <div class="country-menu">
    <ul id="menu-countries-menu" class="menu">
    <li id="menu-item-211" class="fa-uk menu-item menu-item-type-post_type menu-item-object-office current-menu-item menu-item-211">
    <a title="cambodia" href="#">UK</a>
    </li>
    <li id="menu-item-212" class="fa-usa menu-item menu-item-type-post_type menu-item-object-office menu-item-212">
    <a href="#">USA</a>
    </li>
    <li id="menu-item-212" class="fa-spain menu-item menu-item-type-post_type menu-item-object-office menu-item-212">
    <a href="#">Spain</a>
    </li>
    </ul>
    </div>

【问题讨论】：

在您的 CSS 中，您评论了“ul#menu-countries-menu a:hover”的 text-indent 属性。我认为取消注释 text-indent:50px 将解决您的问题。

标签： html css

【解决方案1】：

您可以使用 Javascript 来做到这一点

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

    this.style.textIndent = '50px';

});

【讨论】：

【解决方案2】：

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

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

或

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

示例 sn-p

li.fa-usa a, li.fa-uk a, li.fa-spain a{
  display: block;
  background-repeat: no-repeat;
  width: 60px;
  height: 50px;
  font-size:0px;
  background-size: 50px;
}

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

li.fa-usa, li.fa-uk, li.fa-spain{float:left;}
li.fa-usa a{
  background-image:url('https://cdn.countryflags.com/thumbs/united-states-of-america/flag-round-250.png');

}
li.fa-uk a{
background-image:url('https://cdn.countryflags.com/thumbs/united-kingdom/flag-round-250.png');
}

li.fa-spain a{
  background-image: url('https://cdn.countryflags.com/thumbs/spain/flag-round-250.png')
}

ul#menu-countries-menu{
  list-style-type:none;
  padding:0px;
  display:inline-block;
  margin-top: 20px;
}

.menu-item-object-office{
  display: inline-block;
}

<div class="country-menu">
<ul id="menu-countries-menu" class="menu">
<li id="menu-item-211" class="fa-uk menu-item menu-item-type-post_type menu-item-object-office current-menu-item menu-item-211">
<a title="cambodia" href="#">UK</a>
</li>
<li id="menu-item-212" class="fa-usa menu-item menu-item-type-post_type menu-item-object-office menu-item-212">
<a href="#">USA</a>
</li>
<li id="menu-item-212" class="fa-spain menu-item menu-item-type-post_type menu-item-object-office menu-item-212">
<a href="#">Spain</a>
</li>
</ul>
</div>

【讨论】：