Question

当使用// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;" UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0]; launchScreenView.frame = self.window.bounds; rootView.loadingView = launchScreenView;将button文本向右:hover并快速反转时，我有一个具有padding-right效果的简单float效果很好这种效果应导致button文本向左浮动，但这是问题所在，因为即使指定了button，填充仍仍添加到元素的右侧。

padding-left

这是JSFiddle，任何关于做错事的帮助，提示或解释，我们都会感激不尽。

Answer 1

填充仍被添加到元素的右侧，甚至尽管指定了左侧填充。

这是因为您没有设置按钮的width。

您只需要在width中添加.ButtonLeft, .ButtonRight，以便在向左或向右添加padding时遵循指定的填充。

.ButtonLeft, .ButtonRight{
  display: inline-block;
  position: relative;
  margin: 0.5%;
  padding: 0.652em 1.5em;
  border: none;
  border-radius: 1.5em;
  width: 15em;
  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: -3.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: -3.5em;
}
.ButtonRight:hover span:after{
  right: -1.5em;
  opacity: 1;
  color: inherit;
}

<button class="ButtonLeft"><span>i am lefty</span></button>
  	<br>
  	<br>
  <button class="ButtonRight"><span>i am right</span></button>

取消按钮向右或向左扩展悬停

要使左侧的button扩展到左侧，您需要使其float:right，以便将您添加的padding添加到左侧。另外，添加.btnContainer并指定其width，以使button不会float在屏幕的最右侧。

然后将white-space:nowrap;添加到span，这样文本将保持一行且不会换行。

.btnContainer{
  width:8em;
  margin-left: 5%;
}

.ButtonLeft{
float:right;
}

.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{
  white-space:nowrap;
  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{
  white-space:nowrap;
  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;
}

<div class="btnContainer">
     <button class="ButtonLeft"><span>i am lefty</span></button>
  </div>
 <div class="btnContainer">
    <button class="ButtonRight"><span>i am right</span></button>
  </div>

Answer 2

以下内容可以解决您的问题吗？

.ButtonLeft:hover span{
    padding-left: 1.7em;
    /* left: -1.5em; */
 }

.ButtonRight:hover span{
     padding-right: 1.7em;
     /* right: -1.5em; */
}

将鼠标悬停在CSS上可向左扩展元素

2 个答案: