Question

我在样式锚点上使用转换时遇到问题。

它应该扩展到更高的宽度并显示一个glyphicon。我尝试了宽度最大宽度，但我想我想念一些东西。 glyphicon可以工作，但不是＆＃34;动画＆＃34;宽度。

HTML：

<a class="link" href="/"> Order <a/>

的CSS：

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
 transition: max-width 1000ms ease-in-out;
 -webkit-transition: max-width 1000ms ease-in-out;
 -moz-transition: max-width 1000ms ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    max-width: 100%;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

https://jsfiddle.net/Lg7kutpp/

Answer 1

您的代码无效，因为它没有工作宽度。由于填充，它正在改变大小，因此转换：max-width将不起作用。

修复代码的简便方法是添加转换：all。

检查一下：

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
 transition: all 1s ease-in-out;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    max-width: 100%;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

<a class="link">Order></a>

我只想对width属性进行转换，你应该将display:inline-block和width属性添加到锚类。

a.link {      
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;  
 display: inline-block;
text-align: center;
padding: 10px 15px;
 transition: width 1s ease-in-out;
 -webkit-transition: width 1s ease-in-out;
 -moz-transition: width 1s ease-in-out;    
}

a.link:hover {
    padding: 10px 40px;
    width: 150px;
}

a.link:hover:after {
    font-family: icomoon;
    content: "\e903";
    color: #ffffff;
    font-size: 20px;          
}

<a class="link">Order</a>

Answer 2

a.link {
  background: #0069b4 none repeat scroll 0% 0%;
  color: white;
  font-size: 24px;
  height: 60px;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
  padding: 10px 15px;

}

a.link:hover {
  padding: 10px 40px;
  max-width: 100%;
    transition: 1000ms ease-in-out;
  -webkit-transition:1000ms ease-in-out;
  -moz-transition:1000ms ease-in-out;
}

a.link:hover:after {
  font-family: icomoon;
  content: "\e903";
  color: #ffffff;
  font-size: 20px;

}

您应该在没有max-width

的情况下在悬停选择器上添加转场

https://jsfiddle.net/Lg7kutpp/1/

Answer 3

我认为你需要在 a.link 中将max-width设置为小于100％。

您目前正在做的是在悬停时将max-width设置为100％，但默认设置max-width已经是100％。

在 a.link 下将max-width设置为小于100％的值，或在 a.link:hover 下将max-width设置为大于100％的值

在转换属性方面，您可以编写转换：所有1000ms缓入而不是转换：max-width 1000ms ease-in-out < / strong>，因为使用所有将确保 a.link 上的任何动画都具有相同的属性。

此外，我建议您不要使用 href =＆＃34; /＆＃34; ，除非您打算将用户定向到主页。如果您只想要一个无法在任何地方链接的锚点，您可以使用 href 进行删除。

希望这有帮助。

悬停在链接上的css宽度转换

3 个答案: