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，我设法使用max-width / max-height技巧使其适用于任意数量的文本

这是诀窍

CSS值只能在固定单位值之间转换。但是，假设我们有一个元素的高度设置为auto，但其max-height设置为固定值；比方说1000px。我们不能转换高度，但是我们可以转换max-height，因为它具有明确的值。在任何给定时刻，元素的实际高度都将是高度和最大高度的最大值。因此，只要max-height的值大于auto的值，我们就可以过渡max-height并获得所需效果的版本。

这是来自文章

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>

希望这会有所帮助

圆形按钮在悬停时随文本扩展

1 个答案: