Не работают ссылки в ПК версии?
Здравствуйте, вообщем не могу понять уже в чем проблема, в мобильной версии работает наведение а в ПК ссылки не работают вместе с наведением.
Как быть?
<div class="header_container"> <div class="header"> <input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-bars"></i> </label> <div class="logo"> <p class="logo-text">MY<font color="#cd5b5b">лого</font></p> </div> <ul class="main-menus"> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times"></i> </label> <li><a href="/"> ГЛАВНАЯ </a></li> <li><a href="/">КАК НАЧАТЬ?</a></li> <li><a href="/"><img src="../assets/img/social/vk.svg"></a></li> <li><a href="/"><img src="../assets/img/social/ds.svg"></a></li> <li><a href="/">КАБИНЕТ</a></li> </ul> </div> </div> |
<div class="header_container"> <div class="header"> <input type="checkbox" id="chk"> <label for="chk" class="show-menu-btn"> <i class="fas fa-bars"></i> </label> <div class="logo"> <p class="logo-text">MY<font color="#cd5b5b">лого</font></p> </div> <ul class="main-menus"> <label for="chk" class="hide-menu-btn"> <i class="fas fa-times"></i> </label> <li><a href="/"> ГЛАВНАЯ </a></li> <li><a href="/">КАК НАЧАТЬ?</a></li> <li><a href="/"><img src="../assets/img/social/vk.svg"></a></li> <li><a href="/"><img src="../assets/img/social/ds.svg"></a></li> <li><a href="/">КАБИНЕТ</a></li> </ul> </div> </div>
.header_container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .header_container { max-width: 540px; } } @media (min-width: 768px) { .header_container { max-width: 720px; } } @media (min-width: 992px) { .header_container { max-width: 960px; } } @media (min-width: 1200px) { .header_container { max-width: 1140px; } } .header { display: flex; } .logo { margin-top: 5px; } .logo-text { font-family: 'TT Norms Bold Italic'; font-size: 33px; color: white; margin: 0; } .logo-img { margin-top: 8px; height: 31px; } .slogan { font-family: 'Myriad Pro Regular'; font-size: 9px; color: #ffffff; text-transform: uppercase; letter-spacing: 1.5px; } .main-menus { list-style: none; display: flex; margin-top: 23px; margin-left: 150px; } .main-menus li { margin-left: 55px; white-space: nowrap; } .main-menus a { color: #bbbbbb; font-size: 15px; font-family: 'TT_Norms_Bold'; } .main-menus li:last-child { margin-left: 30px; } .show-menu-btn,.hide-menu-btn { transition: 0.4s; font-size: 30px; color: #fff; cursor: pointer; display: none; } .show-menu-btn { float: right; margin-top: 15px; } .show-menu-btn:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } .hide-menu-btn{ position: absolute; top: 15px; right: 25px; color: #fff; } .hide-menu-btn:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } #chk{ display: none; } @media screen and (min-width: 1200px) { .main-menus a:after { content: ''; display: block; width: 0; margin: auto; margin-top: -48px; box-shadow: 0 7px 0 0 #cd5b5b, 0px 8px 15px 1px rgba(250, 123, 123); border-radius: 20%; transition: .3s; height: 3px; } .main-menus a:hover:after { width: 100%; } } @media screen and (max-width: 1199px) { .main-menus a:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } .main-menus { display: none; } .header { flex-direction: row-reverse; } .logo { float: right; margin: 5px auto 0 0; } .show-menu-btn,.hide-menu-btn { display: block; } #chk:checked ~ .main-menus { margin: 0; padding: 0; background-color: #373737; width: 100%; height: 100%; position: fixed; left: 0; padding: 40% 0; z-index: 333; display: block; text-align: center; } #chk:checked ~ .main-menus li { margin: 0; margin-top: 20px; } } |
.header_container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .header_container { max-width: 540px; } } @media (min-width: 768px) { .header_container { max-width: 720px; } } @media (min-width: 992px) { .header_container { max-width: 960px; } } @media (min-width: 1200px) { .header_container { max-width: 1140px; } } .header { display: flex; } .logo { margin-top: 5px; } .logo-text { font-family: 'TT Norms Bold Italic'; font-size: 33px; color: white; margin: 0; } .logo-img { margin-top: 8px; height: 31px; } .slogan { font-family: 'Myriad Pro Regular'; font-size: 9px; color: #ffffff; text-transform: uppercase; letter-spacing: 1.5px; } .main-menus { list-style: none; display: flex; margin-top: 23px; margin-left: 150px; } .main-menus li { margin-left: 55px; white-space: nowrap; } .main-menus a { color: #bbbbbb; font-size: 15px; font-family: 'TT_Norms_Bold'; } .main-menus li:last-child { margin-left: 30px; } .show-menu-btn,.hide-menu-btn { transition: 0.4s; font-size: 30px; color: #fff; cursor: pointer; display: none; } .show-menu-btn { float: right; margin-top: 15px; } .show-menu-btn:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } .hide-menu-btn{ position: absolute; top: 15px; right: 25px; color: #fff; } .hide-menu-btn:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } #chk{ display: none; } @media screen and (min-width: 1200px) { .main-menus a:after { content: ''; display: block; width: 0; margin: auto; margin-top: -48px; box-shadow: 0 7px 0 0 #cd5b5b, 0px 8px 15px 1px rgba(250, 123, 123); border-radius: 20%; transition: .3s; height: 3px; } .main-menus a:hover:after { width: 100%; } } @media screen and (max-width: 1199px) { .main-menus a:hover { color: #cd5b5b; text-shadow: 0px 0px 16px #cd5b5b; } .main-menus { display: none; } .header { flex-direction: row-reverse; } .logo { float: right; margin: 5px auto 0 0; } .show-menu-btn,.hide-menu-btn { display: block; } #chk:checked ~ .main-menus { margin: 0; padding: 0; background-color: #373737; width: 100%; height: 100%; position: fixed; left: 0; padding: 40% 0; z-index: 333; display: block; text-align: center; } #chk:checked ~ .main-menus li { margin: 0; margin-top: 20px; } }
Дополнительно:
ссылки не работают
Это очень информативное описание проблемы.
Кликните правой кнопкой в области ссылки, выберите исследовать элемент и через инспектор просмотрите какие блоки где расположены.
spoiler
spoilerНу или можете сделать пример с проблемой в песочнице (https://codepen.io) и скинуть сюда, авось кто-то сразу даст решение.
Ответы:
https://codepen.io/Vlatqa/pen/jOXOQro
работает
- вот только что проверил через codepen а так же когда я исследовал элемент так же работает а вот так без данного действия (Исследовать элемент) тупо текст
- db9vol, очевидно, что проблема не в данном коде
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему с неработающими ссылками в ПК версии сайта, вам следует выполнить следующие шаги:
1. Убедитесь, что ваш браузер на ПК обновлен до последней версии. Иногда проблемы с отображением сайтов могут быть связаны с устаревшей версией браузера.
2. Попробуйте очистить кэш и историю браузера. Накопленные данные могут вызывать конфликты и проблемы с отображением некоторых элементов на сайте.
3. Проверьте настройки безопасности вашего браузера. Возможно, некоторые настройки блокируют отображение ссылок на сайтах.
4. Попробуйте отключить расширения браузера, которые могут блокировать нормальную работу сайта. Иногда расширения могут вмешиваться в отображение элементов на странице.
5. Если после всех этих действий проблема не решена, попробуйте открыть сайт в другом браузере. Возможно, проблема связана именно с текущим браузером, и переход на другой поможет исправить ситуацию.
Если ни один из вышеперечисленных способов не помог решить проблему с неработающими ссылками в ПК версии сайта, вам лучше обратиться к службе поддержки сайта или специалисту по информационным технологиям для получения дополнительной помощи.