При наведении на ссылку, хотите переместить ссылку влево, не перемещая границу - PullRequest
Новая
       38

При наведении на ссылку, хотите переместить ссылку влево, не перемещая границу

0 голосов
/ 10 мая 2019

Я пытаюсь выяснить, есть ли способ перемещения ссылки при наведении на нее, не перемещая ее границу. Я хочу, чтобы мои ссылки двигались влево, но я не хочу, чтобы граница, которую я ставил, шла с ним. Вот скрипка с тем, о чем я говорю. Если вы наведите указатель мыши на какую-либо из ссылок, вы увидите, что граница перемещается вместе с ней, и я хотел бы знать, возможно ли не перемещать границу.

А вот и код: 

.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>

У кого-нибудь есть идеи?

Ответы [ 5 ]

1 голос
/ 10 мая 2019

Замените стиль .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;
}
1 голос
/ 10 мая 2019

Вы можете поместить тег <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;
}
0 голосов
/ 11 мая 2019

Добавление тега 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>

Таким образом, вы можете удалить несколько строк кода CSS из .links a.

0 голосов
/ 10 мая 2019

Поскольку отступы располагаются внутри границы, а поле Margin предназначено для интервалов за пределами границы, просто измените поле margin-right на padding-right (как сказал Славомир)

Вот скрипка с изменением

[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;
}
0 голосов
/ 10 мая 2019

В вашем стиле наведения измените margin-right: 10px; на padding-right: 20px;

...