0

Должен цветить и без линии под текстом

a(href='#')
  p.small-grey-text.link US Politics
p.link {
  color: $smallGrey;
  text-decoration: none; 

  &:hover {
    color: $hoverTitle;
    text-decoration: none;
  }
}

2 ответа 2

1

Чтоб убрать подчеркивание text-decoration нужно ставить не на параграф, а на ссылку а. Изменять цвет также правильнее будет на ссылке, но будет работать и так:

a, a:hover {
  text-decoration: none; 
}

p.link {
  color: #aaa;
  width: 100px;

  &:hover {
    color: #c00;
  }
}

HO! В данном случае я бы посоветовал избавиться от элемента р - он здесь лишний со всех сторон. Я полагаю, что Вы его добавили из-за его свойств блокового элемента (margin, padding и т.д.), но это легко навешивается на саму ссылку. Код получается и чище, и правильнее:

a(href='#').small-grey-text.link US Politics

a.link {
  text-decoration: none; 
  color: #aaa;
  display: block;
  margin: 1em;

  &:hover {
    color: #c00;
  }
}

DEMO

0

а почему не сделать так?

jade

a(href='#').small-grey-text.link US Politics

css

a {
  text-decoration: none; 
  color: #aaa;
  width: 100px;
  &:hover {
    color: #c00;
  }
}

или же scss

a {
  text-decoration: none;
  p {
    &.link {
      color: #aaa;
      width: 100px;
      &:hover {
        color: #c00;
      }
    }
  }
}

jade

a(href='#')
  p.small-grey-text.link US Politics
  • хотя на р не желательно вешать классы

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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