3

Такая задача:

При наведении на ссылку a, visibility линии hr должен меняться с hidden на visible

.portfolio__nav__block a {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #4a4a4a;
  margin: 50px 10px 0 10px;
  text-align: center;
}

.portfolio__nav__block hr {
  width: 80px;
  height: 2px;
  background: #f4511e;
  border: none;
  visibility: hidden;
}

.portfolio__nav__block a:hover .portfolio__nav__block hr {
  visibility: visible;
}
<div class="portfolio__nav__block">
  <a href="#">All projects</a>
  <hr>
</div>

2
  • А можно поподробнее?.. эта задача должна быть реализована средствами CSS? Верстка именно такая, как в Вашем примере? (всю доп.информацию пишите, пожалуйста, в непосредственно вопросе) 4 ноя 2018 в 0:01
  • Прошу прощения, да, средствами CSS. По поводу верстки - код, что в примере - я так вижу это кнопку. Возможно, это неправильный вариант, хотя ответ уже был дан, и код заработал. 4 ноя 2018 в 10:17

1 ответ 1

3

.portfolio__nav__block a {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #4a4a4a;
  margin: 50px 10px 0 10px;
  text-align: center;
}

.portfolio__nav__block hr {
  width: 80px;
  height: 2px;
  background: #f4511e;
  border: none;
  visibility: hidden;
}

.portfolio__nav__block a:hover ~ hr {
  visibility: visible;
}
<div class="portfolio__nav__block">
  <a href="#">All projects</a>
  <hr>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.