Question

我想创建一个在悬停时显示箭头的按钮，但是我希望该箭头从右侧进入并在按钮内向右浮动，而不管按钮的大小如何。

以下是我到目前为止所取得的成就。

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; right: 0; 
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}

<button class="button" style="width: 200px;"><span>Hover 1</span></button>
<button class="button" style="width: 140px;"><span>Hover 2</span></button>

<DIV>
  I would like it to look something like the below after hovering
  <DIV class="buttonAfter">
    <SPAN style="float: left;"> Hover after </SPAN><SPAN style="float: right">►</SPAN>
  </DIV>
</DIV>

我希望箭头从元素的外部从右侧进入（溢出时隐藏，一旦在元素的范围内则可见），一旦在框内，则将其固定5px从右边距开始我仍然希望“悬停”保持对齐。

非常感谢任何帮助，在此先感谢。

Answer 1

我喜欢对这样的动画使用伪元素。我在按钮上添加了position:relative，而：after元素是position:absolute。我将：after元素设置为右侧，默认情况下是透明的。悬停按钮时，：after元素移至指示的位置并淡入。

此方法所需的代码少得多，按钮的宽度不再重要，并且对浏览器友好。我希望这会有所帮助。

button{
background-color:black;
padding:.5em 1em;
color:white;
position:relative;
overflow:hidden;
}

button:after{
  content:'►';
  font-size:10px;
  color:white;
  position:absolute;
  top:.5em;
  right:-2em;
  opacity:0;
  transition:all .5s ease-in-out;
}

button:hover:after{
right:1em;
opacity:1;
}

<button class="button" style="width: 200px;">Hover 1</button>
<button class="button" style="width: 140px;">Hover 2</button>

Answer 2

您只需要使span的宽度与其父宽度相等即可。您可以在跨度中使用display:block。

据我所知，span内也不允许button。

因此，您可以尝试在:before上使用button或将按钮更改为div。然后，您可以直接在:before上使用div或像现在一样在跨度上使用它

只需将箭头放置在想要的位置即可。（使用左右翻译等）

P.S。请不要使用float进行布局。并且请使用css'beautifiers'来组织您的代码。

.button {
background-color: rgb(37,37,37);
background-image: none;
border-radius: 4px;
border: none;
color: #BEC4C9;
cursor: pointer;
display: block;
fill: none;
font-family: Arial;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 18.2px;
margin: 5px 1.4px 20px 0;
overflow: hidden;
padding: 5.6px 22.9071px 5.6px 14px;
text-align: left;
transition: all 0.5s;
vertical-align: baseline;
width: auto;
}

.button span {
cursor: pointer; position: relative; transition: 0.5s;
 width: 100%; display:block;
}

.button span:after {
content: '\►'; position: absolute; opacity: 0; top: 0; left: 0; transition: 0.5s;
}

.button:hover span {
  padding-right: 23px; color: #ffffff;
}

.button:hover span:after {
  opacity: 1;
  left: calc(100% - 23px);
}

.buttonAfter {
  background-color: rgb(37,37,37);
  background-image: none;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  fill: none;
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  line-height: 18.2px;
  margin: 5px 1.4px 20px 0;
  overflow: hidden;
  padding: 5.6px 5px 5.6px 14px;
  text-align: left;
  transition: all 0.5s;
  vertical-align: baseline;
  width: 200px;
}

<div class="button" style="width: 200px;"><span>Hover 1</span></div>
<div class="button" style="width: 140px;"><span>Hover 2</span></div>

<div>
  I would like it to look something like the below after hovering
  <div class="buttonAfter">
    <span style="float: left;"> Hover after </span><span style="float: right">►</span>
  </div>
</div>

创建按钮，将鼠标悬停在右侧显示的箭头上

2 个答案: