Question

我试图弄清楚是否有一种方法可以将鼠标悬停在链接上而不移动其边界。我希望我的链接向左移动，但我不希望它带有边界。这是我所谈论的东西。如果将鼠标悬停在任何链接上，您会看到边框随其移动，我想知道是否有可能不移动边框。

这是代码：

.links {
  width: 240px;
  margin-left: -35px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  display: block;
}

.links a {
  border-bottom: 1px solid rgba(117, 117, 117, 0.3);
  display: block;
  padding: 8px;
}

.links a:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

<div class="links">
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
  <a href="/">link</a>
</div>

有人有什么想法吗？

Answer 1

您可以在链接标签中放置一个<span>标签，然后将过渡应用于<span>

https://jsfiddle.net/DIRTY_SMITH/n4Lsrv3k/2/

HTML

<div class="links">
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
  <a href="/"><span>link</span></a>
</div>

CSS

span:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Answer 2

用以下代码替换.links a:hover样式。

.links a:hover {
  font-style: italic;
  padding-right: 20px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Answer 3

以您的悬停样式，将margin-right: 10px;更改为padding-right: 20px;

Answer 4

由于填充在边框内是间距，边距是在边框外，所以只需将margin-right更改为padding-right（如Slawomir所说）

这是变化的小提琴

[https://jsfiddle.net/092fd4hv/][1]

.links a:hover {
  border-bottom: 1px solid rgba(207, 166, 255, 0.5);
  font-style: italic;
  padding-right: 20px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

Answer 5

添加span标签是一种方法，但是您也可以从ul列表，将li边框并在悬停时为a设置动画。然后，您无需使用span标签包裹每个元素。

.links > li {
  width: 240px;
  margin-left: -35px;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 8px;
  display: block;
  border-bottom: 1px solid rgba(117, 117, 117, 0.3);
}

.links a:hover {
  font-style: italic;
  margin-right: 10px;
  font-weight: none;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
}

<ul class="links">
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
  <li><a href="/">link</a></li>
</ul>

因此您实际上可以从.links a中删除几条CSS代码行。

将鼠标悬停在链接上时，要向左移动链接而不移动边框

5 个答案: