Это раздел моих навыков на моем сайте. Мне это нравится, но я хотел добавить к нему некоторые эффекты наведения, и да, я знаю, что могу сделать это в CSS, но я хотел, чтобы цвета смешивались от одного к другому и к третьему. Я также хотел, чтобы названия иконок показывались при наведении. И я хотел поработать над своими навыками JavaScript, пытаясь узнать что-то новое.
Поэтому я написал этот фрагмент кода, чтобы при наведении курсора на тег i изменить цвет на мой золотой и показать текст значка, который начинается с непрозрачности 0 и переходит в 1.
$('#front .skills__flex i').mouseenter(function() { $(this).css({ 'color': '#E1BB79' }); $('.skill-icon').css({ 'opacity': '1' }) });
Но я закончил с этим:
При наведении курсора на один из значков отображаются все заголовки значков. Я хотел повлиять только на текст значка, связанный с значком, на который я навел курсор. Я пробовал много разных способов, в том числе тот, который меняет все значки на золотые и показывает весь текст значков. Поэтому я спросил одного из инструкторов HackerYou, и она дала мне намек на братьев и сестер.
Использование этого для воздействия на мой селектор при наведении на него курсора позволяет мне работать только с этим элементом, значком, но как повлиять на другие элементы в том же div (статье/разделе)? Пока они являются братьями и сестрами элемента this, вы можете использовать… да, вы, наверное, догадались, что это .siblings().
$('#front .skills__flex i').mouseenter(function() { $(this).css({ 'color': '#E1BB79' }); $(this).siblings('p').css({ 'opacity': '1' }) });
Прикрепив .siblings('p') под моим селектором для элемента, на который наведен курсор, я могу сказать коду, чтобы он делал что-то конкретное с тегами абзаца, которые связаны только с этим значком, а не с другим. иконы (их родственники?).
Бонус
Еще одна забавная вещь, которую я узнал, заключалась в использовании nth-child в селекторах, чтобы элементы в полях повторителей появлялись в разное время. Я люблю энного ребенка. Вот как вы могли бы использовать его для выбора третьего div в классе с именем .projects__flex (я пытаюсь понять БЭМ):
$('#front .projects__flex div:nth-child(3)').css({ 'opacity': '0', 'transition': 'ease opacity 1.2s' });
Хорошо, пока!