修复悬停扩展元素

Question

我不知道如何解决这个问题：在＆＃39; a＆＃39; div扩大的元素和另一个＆＃39; a＆＃39;移动。

感谢您的帮助

https://jsfiddle.net/0r2v2qyp/

这里是html：

>>> from argparse import ArgumentParser
>>> import sys
>>> parser = ArgumentParser(fromfile_prefix_chars='@')
>>> parser.add_argument('--foo')
_StoreAction(option_strings=['--foo'], dest='foo', nargs=None, const=None, default=None, type=None, choices=None, help=None, metavar=None)
>>> parser.add_argument('bar', nargs='?')
_StoreAction(option_strings=[], dest='bar', nargs='?', const=None, default=None, type=None, choices=None, help=None, metavar=None)
>>> sys.argv[1:] = ['--foo', 'spam', 'barbaz']
>>> parser.parse_args()
Namespace(bar='barbaz', foo='spam')
>>> with open('commandline_args.txt', 'w') as f:
...     f.write('\n'.join(sys.argv[1:]))
...
17
>>> parser.parse_args(['@commandline_args.txt'])
Namespace(bar='barbaz', foo='spam')
>>> sys.argv[1:] = ['--foo=spam', 'barbaz']  # using alternate syntax
>>> parser.parse_args()
Namespace(bar='barbaz', foo='spam')
>>> with open('commandline_args.txt', 'w') as f:
...     f.write('\n'.join(sys.argv[1:]))
...
17
>>> parser.parse_args(['@commandline_args.txt'])
Namespace(bar='barbaz', foo='spam')

和css：

<a id="btn_agency" class="btn_presentation">Agenzia</a>
<a id="btn_student" class="btn_presentation">Studente</a>
<a id="btn_prof" class="btn_presentation">Docente</a>
<a id="btn_admin" class="btn_presentation">Segreteria</a>

Answer 1

为了能够为字母间距设置动画，你必须给div一个足够宽的固定宽度，以便在展开时补偿文本。

＆＃13;

＆＃13;

div {
  display: inline-block;
  margin: 10px;
  width: 120px;
}

.btn_presentation {
  display: inline-block;
  color: royalblue;
  font-size: 20px;
  position: relative;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: all .2s ease-out;
}

.btn_presentation:after {
  content: '';
  position: relative;
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  background: red;
  transition: all .2s ease-out;
}

.btn_presentation:hover {
  letter-spacing: 5px;
  transition: all .3s ease-in;
}

.btn_presentation:hover:after {
  width: 100%;
  height: 2px;
  transition: all .2s ease-in-out;
}

＆＃13;

<div>
  <a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
  <a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
  <a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
  <a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>

＆＃13;

＆＃13;

＆＃13;

选项可以改为使用transform

进行缩放

＆＃13;

＆＃13;

div {
  display: inline-block;
  margin: 10px;
}

.btn_presentation {
  display: inline-block;
  color: royalblue;
  font-size: 20px;
  position: relative;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: transform .2s ease-out;
}

.btn_presentation:after {
  content: '';
  position: relative;
  display: block;
  margin: 0 auto;
  width: 0;
  height: 2px;
  background: red;
  transition: width .2s ease-out;
}

.btn_presentation:hover {
  transform: scale(1.2);
  transition: transform .3s ease-in;
}

.btn_presentation:hover:after {
  width: 100%;
  transition: width .2s ease-in-out;
}

＆＃13;

<div>
  <a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
  <a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
  <a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
  <a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>

＆＃13;

＆＃13;

＆＃13;

根据评论更新

这个方面只有方法

＆＃13;

＆＃13;

div {
  display: inline-block;
  margin: 10px;
}

.btn_presentation {
  display: inline-block;
  color: royalblue;
  font-size: 20px;
  position: relative;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: transform .2s ease-out;
}

.btn_presentation:after {
  content: '';
  position: relative;
  display: block;
  margin: 0 auto;
  width: 0;
  height: 2px;
  background: red;
  transition: width .2s ease-out;
}

.btn_presentation:hover {
  transform: scaleX(1.2);
  transition: transform .3s ease-in;
}

.btn_presentation:hover:after {
  width: 100%;
  transition: width .2s ease-in-out;
}

＆＃13;

<div>
  <a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
  <a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
  <a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
  <a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>

＆＃13;

＆＃13;

＆＃13;