代码之家 › 专栏 › 技术社区 › Bobby Axe

CSS悬停时向左展开元素

css html

Bobby Axe · 技术社区 · 6 年前

我有一个简单的 button 用一个 :hover 效果良好,当 padding-right 习惯于 float 这个 按钮 文本向右,快速反转此效果将导致 按钮 文本向左浮动,但这就是问题所在,因为填充仍然被添加到元素的右侧,尽管如此 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 , 任何帮助,提示或解释什么是做错事都会受到感激。

2 回复 | 直到 6 年前

davecar21 6 年前

填充仍然被添加到元素的右侧,甚至虽然指定了左填充。

这是因为你没有设置 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 所以 衬垫 您添加的将添加到左侧。另外,添加 .btnContainer 并指定了它的 宽度 所以 按钮 不会 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>

IP_ 6 年前

以下内容是否解决了您的问题?

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

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