Появляется и исчезает подчеркивание при наведении курсора?

Как сделать так, чтобы подчеркивание появлялось и исчезало при наведении курсора на мои ссылки?

Я не могу использовать свойство border-bottom, потому что некоторые из моих ссылок являются вкладками, поэтому, если я использую border-bottom, div получает подчеркивание, а не текст. Мне нужно только текст, который нужно подчеркнуть.

Есть ли способ сделать это с помощью CSS или JS?

Вот HTML-код, в который я хотел бы добавить эффект:

<div class="tabcordion">
  <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li>
    <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li>
    <li class="option3"><a data-target=".BESUCH">BESUCH</a></li>
    <li class="option4"><a data-target=".MITGLIED">MITGLIED</a></li>
    <li class="option5"><a data-target=".PROJEKTBERATUNG">PROJEKTBERATUNG</a></li>
  </ul>
</div>


html css hover underline
person Lolo    schedule 08.09.2017    source источник
comment
Вы хотите, чтобы исчезло только подчеркивание или весь текст? Я спрашиваю, потому что не думаю, что вы можете сделать просто подчеркивание таким, какое оно есть.   -  person Tyler Christian    schedule 08.09.2017
comment
@TylerChristian Мне нужно только подчеркивание, чтобы исчезать / исчезать. Но так как мой текст всегда черный (подчеркнутый или нет), то может это и не важно?   -  person Lolo    schedule 08.09.2017
comment
Ну, если я правильно понимаю, о чем вы говорите, вам нужно разработать другую схему, возможно, используя <hr> или какой-либо другой элемент для подчеркивания текста. Потому что, если вы заглушите <a>, он сделает все.   -  person Tyler Christian    schedule 08.09.2017
comment
Есть несколько способов сделать это, но это действительно зависит от структуры вашей страницы. Если вы оборачиваете текст в span или что-то подобное, вы можете добавить к нему нижнюю границу, а затем animate через CSS.   -  person Tijmen    schedule 08.09.2017
comment
Я думаю, что я бы использовал @keyframes для установки начальной и конечной непрозрачности/цвета. stackoverflow.com/questions/24363205/   -  person Tyler Christian    schedule 08.09.2017
comment
@TylerChristian Тогда мне нужно было бы установить начальную и конечную непрозрачность / цвет только для подчеркивания. Есть ли способ сделать это?   -  person Lolo    schedule 08.09.2017

Ответы (4)


arrow_upward
6
arrow_downward

Вы можете использовать свойство text-decoration и изменить цвет.

text-decoration-color @ MDN

a {
  text-decoration: underline solid transparent;
  transition: text-decoration 1s ease;
  display: block;
  width: 100px;
  border: 1px solid green;
  margin: 1em auto;
  border-radius: 1em;
  padding: 1em;
}

a:hover {
  text-decoration: underline solid Currentcolor;
}
<a href="#">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</a>

person Paulie_D    schedule 08.09.2017
comment
Это работает, но только в Firefox и Chrome. Не работает в Safari… Есть ли способ заставить это решение работать во всех браузерах? - person Lolo; 08.09.2017
comment
MDN указывает, что Safari нужен префикс -webkit (хотя с IE не повезло). - person Paulie_D; 08.09.2017
comment
В порядке ! Как мне написать код с префиксом -webkit? - person Lolo; 08.09.2017
comment
Используйте отдельные свойства, такие как text-decoration-color На MDN есть еще — developer.mozilla .org/en-US/docs/Web/CSS/text-decoration - person Paulie_D; 08.09.2017
comment
Я посмотрел на MDN. Но когда я использую префикс -webkit-, он удаляет весь мой подчеркнутый текст и наводит курсор... - person Lolo; 08.09.2017
comment
именно то, что мне было нужно. - person Galzor; 03.11.2018

arrow_upward
1
arrow_downward 

a {
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0 ,0);
  transition: border-bottom 300ms;
}
a:hover {
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}
<a href="#">qwerty lorem</a>

Вы должны использовать border-bottom и анимировать это, используя rgba и изменяя значение непрозрачности.

person Sam Willis    schedule 08.09.2017
comment
Да. Но я попросил желательно не border-bottom решение. Потому что некоторые мои ссылки находятся во вкладках (div) и тогда он подчеркивает div, а не текст. - person Lolo; 08.09.2017
comment
Можете ли вы показать какой-нибудь html для этого, так как трудно решить проблему, которую нельзя увидеть. Будет способ сделать это с помощью border-bottom, это просто вопрос создания селектора, который работает для вашей структуры dom. - person Sam Willis; 08.09.2017

arrow_upward
1
arrow_downward

Вы можете использовать pseudoelement

.tab {
  background: whitesmoke;
  padding: 1em;
  display: inline-block;
}

a {
  text-decoration: none;
  position: relative;
  font-size: 2em;
}

a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: black;
  opacity: 0;
  transition: 1s all ease-in-out;
}

a:hover:after {
  opacity: 1;
}
<div class="tab">
  <a href="#" class="underline">link</a>
</div>

person sol    schedule 08.09.2017
comment
На самом деле это действительно умный способ сделать это, так как он работает как для div, так и для тегов a. Однако для div вы можете немного position поднять псевдоэлемент, чтобы он не был слишком низким (за пределами div/tab) - person Tijmen; 08.09.2017

arrow_upward
0
arrow_downward

Я не знаю, есть ли способ сделать это с помощью CSS text-decoration, но вы можете имитировать это с помощью border-bottom:

.posts a {
  color: black;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  -webkit-transition: border 400ms ease;
  -moz-transition: border 400ms ease;
  -ms-transition: border 400ms ease;
  -o-transition: border 400ms ease;
  transition: border 400ms ease;
}

.posts a:hover,
.posts a:active {
  border-bottom: 1px solid black;
}
<div class="posts">
  <a href="#">something</a>
</div>

person Dan Kreiger    schedule 08.09.2017