html - 如何使 CSS ul li 淡出文本？

Question

我想创建一个垂直菜单，但鼠标悬停时会出现菜单文本。但是文本会出现在元素的左侧。

<div class="container">
  <ul>
    <li><span>İtem-1</span></li>
    <li><span>Long Name İtem-1</span></li>
    <li><span>Very Long Name İtem-1</span></li>
  </ul>
</div>

css 是:

.container{
  margin: auto 50%;
}
ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;  
}
 ul li{
    position:relative;
    background:#E01B6A; 
    width:40px;
    height:40px;
    margin-bottom:5px;
}
ul li span{
    display: none;
}

ul li:hover span{
     position: absolute;
     display:  inline-block;
     background:#fefefe;
}

当鼠标悬停时，文本将显示在一个正方形中。

TEST page

Answer 1

如果我没理解错的话，您希望文本出现在正方形之外。为此，请设置 left 或 right 属性来定位文本:

.container {
  margin: auto 50%;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

ul li {
  position: relative;
  background: #E01B6A;
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

ul li span {
  display: none;
}

ul li:hover span {
  position: absolute;
  display: inline-block;
  background: #fefefe;
  right: 100%;
  white-space: nowrap;
  line-height: 40px;
}

<div class="container">
  <ul>
    <li><span>İtem-1</span></li>
    <li><span>Long Name İtem-1</span></li>
    <li><span>Very Long Name İtem-1</span></li>
  </ul>
</div>