Я почесываю голову здесь: у меня есть несколько делений, которые переходят при наведении, но я пытаюсь воссоздать то же самое на якорной ссылке, и я не могу заставить его соответствовать. Для жизни я не могу найти причину!
Редактировать: Так что я забыл описать мою проблему, упс!
В основном, две желтые кнопки - это то, что я могу сделать: одна переходит, однако в качестве ссылки можно нажимать только текст, а не желтую область. Другая желтая кнопка полностью активна, поэтому полная кнопка - это ссылка, но она не переходит. Я хотел бы сделать переход на этих желтых кнопках, чтобы они соответствовали миниатюрам "project-tile".
Вот мой код (извините, если форматирование не прошло - первый пост!):
/* This anchor's button isn't fully clickable */
.prolink {
background: yellow;
width: 100px;
padding: 10px 20px;
margin: 30px auto;
border: 2px solid black;
border-radius: 25px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
transition: transform 350ms;
}
.prolink:hover {
background: var(--hoveryellow);
color: var(--deepblue);
transform: scale(1.08);
}
/* This anchor won't transition */
#pro-link-text {
background: yellow;
width: 100px;
padding: 10px 20px;
margin: 30px auto;
border: 2px solid black;
border-radius: 25px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
transition: transform 350ms;
}
#pro-link-text:hover {
background: var(--hoveryellow);
color: var(--deepblue);
transform: scale(1.08);
}
<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
Клянусь, он правильно отформатирован в CodePen, хаха:
https://codepen.io/fitfingers/pen/mQEPry?editors=1100
Заранее спасибо всем, кто может указать мне правильное направление:)