Вопрос №55804 от пользователя Andrey Sharaevskiy в испытании «Вкладки»

Andrey Sharaevskiy

Здравствуйте, Я уже осатанел на этом испытании, возможно глаз замылился окончательно, подскажите, пожалуйста, на что обратить внимание:

Решаю финальную задачу с отображением контена по наведению курсора на ссылку. Мой селектор на строках 91-101 app.css.

Кажется ошибка во вложенности у ссылок class="tab-name" и скрытого блока с контентом .tabs-content-item - у них разные уровни вложенности => родсветнный селектор не срабатывает. Я пытался решить это удалением обертки у ссылок (class='tabs-links'), но без этого конейтенера не получается "вынуть" эти три ссылки из потока колонок, как заголовок h1 - они громоздятся в начале первой колонки наряду с остальным контентом.

Я явно пошел не по эталонному решению так как .tabs остался не заполнен, хотя для этого предусмотрено место. Не представляю как решить задачу без обертывания ссылок <a>.

Намекните, пожалуйста, как быть?

код: https://ru.hexlet.io/code_reviews/421844?submission_id=537544

4 1

Nikita Mikhaylov

Здравствуйте

Давайте пойдём последовательно:

у них разные уровни вложенности => родсветнный селектор не срабатывает.

Да, вы правы. В такой вёрстке мы действительно не сможем сделать правильный селектор, так как не можем выйти «за пределы» родительского селектора. Значит решение сделать ссылки и .tabs-content на одном уровне — это правильное решение. У вас получилось сделать открытие вкладок именно при таком подходе? Без учёта внешнего вида (пока)

1

Andrey Sharaevskiy

Никита, благодарю за обратную связь!

С очередного захода получилось реализовать срабатывание селектора. Мне как то не приходило в голову, что можно комбинировать виды селекторов в длинные цепочки.

вот что получилось https://ru.hexlet.io/code_reviews/421844

Осталась проблема отображения вкладок после наведения... Пробовал применить на .tab-name column-span: all;, уже лучше, но все-равно не то.

0

Nikita Mikhaylov

Подумайте, а что именно нужно растягивать при наведении на вкладку? Саму ссылку на эту вкладку или всё же контент? То есть вы в правильном направлении по поводу column-span, но надо найти правильное применение ему

1

Andrey Sharaevskiy

Благодарю вас за подсказки, и что дали возможность довершить упражнение самостоятельно! Для первого по номеру в профессии испытания, задача, доложу я вам, не тривиальная :) Сейчас, по завершению, решение кажется таким очевидным, простым и понятным...

0

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
1 июня 5 месяцев