Блог

Главная - Вопросы по программированию - CSS3 переход при наведении ссылки

CSS3 переход при наведении ссылки

#css #transform #href #transition

#css #преобразование #href #переход

Вопрос:

Иметь следующий класс

 .home-cards a {
    display: inline-block;
    padding-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
 }

.home-cards a:hover {
    font-size: 16px;
    color: red;
}

Я пытаюсь добавить переход / преобразование либо к размеру шрифта, либо к цвету, чтобы сделать эффект наведения менее резким. Не удалось найти ничего, что обсуждало бы эти два элемента в отношении перехода. Буду признателен за любую помощь, поскольку это некоммерческий проект для сайта рецептов big Sis … да, сети нужен еще один из них, но в ее защиту только рецепты без глютена.

Извините, забыл упомянуть, что размер шрифта равен 12 пикселей, а цвет шрифта — серый, если он не наведен

Ответ №1:

Я только что добавил эти строки и надеюсь, что это поможет вам:

  1. размер шрифта: 12 пикселей; (Для установки размера шрифта)
  2. переход: .5s размер шрифта, 1s цвет; (Означает 0,5 секунды на изменение размера шрифта и 1 секунду на изменение цвета ссылки)
  3. цвет: серый; (Для изменения цвета текста)
  4. оформление текста: отсутствует; (Чтобы убрать подчеркивание ссылки)

 .home-cards a {
    display: inline-block;
    padding-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    transition: .5s font-size, 1s color;
    color: grey;
    text-decoration: none;
 }

.home-cards a:hover {
    font-size: 16px;
    color: red;
}  
 <div class="home-cards">

    <a href="">Test</a>
    
</div>

Ответ №2:

Вы можете выбрать, к каким свойствам вы хотите применить преобразование.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 a {
  font-size: 12px;
  color: grey;
  transition: font-size 0.5s ease, color 0.5s ease;
}

a:hover {
  font-size: 16px;
  color: red;
  transition: font-size 0.5s ease, color 0.5s ease;
}  
 <a href="#">My Link</a>

Ответ №3:

Если у вас есть другой тег элемента внутри вашего тега привязки, например:

 <a href="#"><p style="display: inline; margin: 0;">test</p></a>

Попробуйте другой селектор css:

 .home-card a:hover p{
    font-size: 14px;
    color: red; 
}

Возможно, вы захотите удалить лишнее поле из тега p … и сделать его отображаемым встроенным, поскольку тег p является элементом уровня блока.