Вопрос №55804 от пользователя 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
Здравствуйте
Давайте пойдём последовательно:
у них разные уровни вложенности => родсветнный селектор не срабатывает.
Да, вы правы. В такой вёрстке мы действительно не сможем сделать правильный селектор, так как не можем выйти «за пределы» родительского селектора. Значит решение сделать ссылки и .tabs-content на одном уровне — это правильное решение. У вас получилось сделать открытие вкладок именно при таком подходе? Без учёта внешнего вида (пока)
Никита, благодарю за обратную связь!
С очередного захода получилось реализовать срабатывание селектора. Мне как то не приходило в голову, что можно комбинировать виды селекторов в длинные цепочки.
вот что получилось https://ru.hexlet.io/code_reviews/421844
Осталась проблема отображения вкладок после наведения... Пробовал применить на .tab-name column-span: all;, уже лучше, но все-равно не то.
Подумайте, а что именно нужно растягивать при наведении на вкладку? Саму ссылку на эту вкладку или всё же контент? То есть вы в правильном направлении по поводу column-span, но надо найти правильное применение ему
Благодарю вас за подсказки, и что дали возможность довершить упражнение самостоятельно! Для первого по номеру в профессии испытания, задача, доложу я вам, не тривиальная :) Сейчас, по завершению, решение кажется таким очевидным, простым и понятным...
Используйте Хекслет по максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
