Question

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

我不确定将鼠标悬停在国旗右侧时如何显示国家/地区名称。

请参见Jsfiddle演示

    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>

Answer 1

您可以使用Javascript

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

    this.style.textIndent = '50px';

});

Answer 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;
}

示例代码段

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>

悬停时显示菜单文本

2 个答案: