为悬停时的跨度内容文本添加 CSS 过渡

问题描述 投票：0回答：1

我想在鼠标悬停在按钮上时向按钮文本添加右向双角引号 (»)。这工作得很好，请参阅下面的我的代码。但是，当我将鼠标移到按钮上时，文本会“跳跃”，而不是平滑移动，尽管我添加了过渡。

您可以运行下面的代码片段。

html {
   font-family: Tahoma;
   margin: 0 5px 0 5px;
}

body {
   margin: 0;
}

.svgbutton {
   display: inline-block;
   border-radius: 4px;
   padding: 2px;
   width: 6em;
   box-shadow: 2px 2px 1px #efefef;
   color: black;
   border: 1px solid #dfdfdf;
   background-color: transparent;
   cursor: pointer;
   transition: 2s;
   vertical-align: top;
}

.svgbutton span {
   cursor: pointer;
   display: inline-block;
   border: thin solid red;
}

.svgbutton span::after {
   content: '';
   opacity: 0;
   border: thin solid blue;
}

.svgbutton:hover span {
}

.svgbutton:hover span::after {
   content: ' \00bb';
   opacity: 1;
   transition: 0.5s;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
      </svg><br />
   <span>Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test Test</span>
</button>
</p>
</body>
</html>

蓝色和红色框仅出于调试目的而插入。

怎样才能让文字移动流畅？任何提示都将受到高度赞赏。

css css-transitions
1个回答
0
投票

content
无法转换，因此我建议将 
width
设置为零并转换为 
1ch
或您认为合适的任何内容。

html {
  font-family: Tahoma;
  margin: 0 5px 0 5px;
}

body {
  margin: 0;
}

.svgbutton {
  display: inline-block;
  border-radius: 4px;
  padding: 2px;
  width: 6em;
  box-shadow: 2px 2px 1px #efefef;
  color: black;
  border: 1px solid #dfdfdf;
  background-color: transparent;
  cursor: pointer;
  transition: 2s;
  vertical-align: top;
}

.svgbutton span {
  cursor: pointer;
  display: inline-block;
  border: thin solid red;
}

.svgbutton span::after {
  content: ' \00bb';
  opacity: 0;
  width: 0;
  display: inline-block;
  //border: thin solid blue;
}

.svgbutton:hover span {}

.svgbutton:hover span::after {
  content: ' \00bb';
  opacity: 1;
  transition: 0.5s;
  width: 1ch;
}
<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:red;stroke-width:0;"/>
      </svg><br />
   <span>Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:green;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test</span>
</button>

<button class="svgbutton" onClick="alert('Click')">
   <svg width="100px" height="60px">
      <rect x="10" y="10" width="50" height="50" style="fill:blue;stroke-width:0;"/>
   </svg><br />
   <span>Test Test Test Test</span>
</button>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.