html - 悬停时用文本扩展的圆形按钮

Question

您好，我想创建一个按钮，当您将光标移到该按钮上时，它会展开并显示文本。我尝试创建它，但是当我尝试放置更长的文本时遇到问题。如果我用光标悬停时使用较长的文本，文本会出现在背景上，我不知道该怎么做!

body {
  background: #333;
}
nav {
  position: relative;
  float: right;
  right: 20px;
  text-align: right;
  font-family: sans-serif;
  font-size: 25px;
}
ul {
  list-style: none;
}

i {
  z-index: 999;
  background: #fff;
}

ul li {
  background: #fff;
  padding: 15px;
  width: auto;
  border-radius: 50px;
}

ul span {
  margin-right: 0px;
  display: inline-block;
  position: relative;
  right: 35px;
  visibility: none;
  width: 0;
  opacity: 0;
  text-align: center;
  transition: all 1s;
}

li:hover {
  cursor: pointer;
}

li:hover span {
  right: 0;
  visibility: visible;
  margin-right: 10px;
  opacity: 1;
  width: 100px;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<nav>
	<ul>
    <a><li><span>Home</span><i class="fa fa-home"></i></li></a>
	</ul>
</nav>

Answer 1

使用精确的 HTML，我设法使用最大宽度/最大高度技巧使其适用于任何数量的文本

这里是技巧，

CSS values can only be transitioned to and from fixed unit values. But imagine we have an element whose height is set to auto, but whose max-height is set to a fixed value; say, 1000px. We can't transition height, but we can transition max-height, since it has an explicit value. At any given moment, the actual height of the element will be the maximum of the height and the max-height. So as long as max-height's value is greater than what auto comes out to, we can just transition max-height and achieve a version of the desired effect.

本文来自文章

Using CSS Transitions on Auto Dimensions

body {
  background: #333;
}

nav {
  position: relative;
  float: right;
  right: 20px;
  text-align: right;
  font-family: sans-serif;
  font-size: 25px;
}
ul {
  list-style: none;
  margin:0;
  padding:0;
  max-width: 75px;
}
ul:after{
  content:"";
  display: block;
  clear: both;
}

i {
  background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,5) 33%, rgba(255,255,255,1) 33%);
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  margin:-20px;
  text-decoration: none;
  color:black; /*Color of the Icon*/
  position: absolute;
    z-index: 20;
    right: 15px;
    bottom: 15px;
    font-size: 26px !important;
    text-align: center;
    line-height: 28px !important;
}

ul li {
  background: #fff;
  padding:0px;
  width: auto;
  border-radius: 50px;
  text-align: center;
  overflow:hidden;
  float:right;
  margin-bottom: 10px;

}
ul li a{
  position:relative;
  display: block;
  min-width: 27px;
  padding:15px;
}
ul span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  margin-right: 0px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  visibility: none;
  width: auto;
  max-width:0px; /* This is the fixed unit value */
  opacity: 0;
  text-align: center;
  transition:all 1s;
  box-sizing:border-box;
  padding-right:0px;
  text-decoration:none;
  color:black;
}

li:hover {
  cursor: pointer;
}

li:hover span {
  margin-right:0px;
  opacity: 1;
  width: auto;
  max-width:500px; /* this value makes the transition */
  padding-right:38px;
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<nav>
  <ul>
      <li>
        <a href="#">
          <span>Some long Title</span>           <i class="fa fa-home"></i>
        </a>
      </li>
      <li>
        <a href="#">
          <span>Another title</span>           <i class="fa fa-cog"></i>
        </a>
    </li>
  </ul>
</nav>

希望对你有帮助