悬停时的CSS向左扩展元素
悬停时的CSS向左扩展元素
提问于 2018-08-02 08:48:10
我有一个简单的带有:hover效果的button，当padding-right被用来向右float button文本时，效果很好，这种效果的快速反转应该会导致button文本向左浮动，但这就是问题所在，因为即使指定了padding-left，填充仍然被添加到元素的右侧。
<!DOCTYPE html>
<html>
<head>
<title>button</title>
<style type="text/css">
.ButtonLeft, .ButtonRight{
display: inline-block;
position: relative;
margin: 0.5%;
padding: 0.652em 1.5em;
border: none;
border-radius: 1.5em;
color: #FFFFFF;
background-color: rgba(0, 10, 26, 0.75);
background: -webkit-gradient(
linear, left top, left bottom,
from(rgba(0, 10, 26, 0.0)),
to(rgba(0, 10, 26, 0.75)));
text-align: center;
font-family: Arial;
font-size: 1em;
font-weight: bold;
text-decoration: none;
outline: none;
transition: all 0.5s;
}
.ButtonLeft span{
display: inline-block;
position: relative;
left: -0.05em;
transition: 0.5s;
}
.ButtonLeft span:before{
content: '\00ab';
position: relative;
opacity: 0;
left: -0.05em;
transition: 0.5s;
}
.ButtonLeft:hover span{
padding-left: 1.7em;
left: -1.5em;
}
.ButtonLeft:hover span:before{
left: -1.5em;
opacity: 1;
color: inherit;
}
.ButtonRight span{
display: inline-block;
position: relative;
right: -0.05em;
transition: 0.5s;
}
.ButtonRight span:after{
content: '\00bb';
position: relative;
opacity: 0;
right: -0.05em;
transition: 0.5s;
}
.ButtonRight:hover span{
padding-right: 1.7em;
right: -1.5em;
}
.ButtonRight:hover span:after{
right: -1.5em;
opacity: 1;
color: inherit;
}
</style>
</head>
<body>
<button class="ButtonLeft"><span>i am lefty</span></button>
<br>
<br>
<button class="ButtonRight"><span>i am right</span></button>
</body>
这里是JSFiddle，任何关于我做错了什么的帮助，提示或解释都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2018-08-02 09:00:34
下面的方法能解决你的问题吗？
.ButtonLeft:hover span{
padding-left: 1.7em;
/* left: -1.5em; */
}
.ButtonRight:hover span{
padding-right: 1.7em;
/* right: -1.5em; */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51644096
复制相关文章
相似问题
腾讯云开发者
