Мобильная версияЯ пытаюсь использовать эффект размытия фона во всплывающей подсказке, чтобы сделать ее читабельной при наведении курсора мыши. Моя интуиция подсказывает мне, что фон имеет более высокое значение Z, чем всплывающая подсказка. Я попробовал несколько вещей, чтобы попытаться устранить эффект размытия, но, похоже, ничего не изменило результат. Если я изменю backdrop-filter на filter: Blur, то подсказка исчезнет за фоном.
Проблема
let btn = document.querySelector("#btn"); let Sidebar = document.querySelector(".sidebar"); let searchBtn = document.querySelector(".bx-search"); btn.onclick = функция() { Sidebar.classList.toggle("активный"); } searchBtn.onclick = функция() { Sidebar.classList.toggle("активный"); { маржа: 0; заполнение: 0; размер коробки: граница-коробка; семейство шрифтов: «Comic sans MS», без засечек; } тело { положение: относительное; минимальная высота: 100vh; ширина: 100%; переполнение: скрыто; фон: URL(achtergrond.jpg); размер фона: обложка; фоновая позиция: центр; } .сайдбар { положение: фиксированное; верх: 0; слева: 0; высота: 100%; ширина: 78 пикселей; отступы: 6 пикселей 14 пикселей; фон: прозрачный; фоновый фильтр: размытие (20 пикселей); граница-верхний-правый-радиус: 12 пикселей; граница-нижний-правый-радиус: 12 пикселей; box-shadow: 0 0 10px rgba(0, 0, 0, 1.1); переход: все 0,5 секунды легкости; } .sidebar.active { ширина: 240 пикселей; } .sidebar .logo_content .logo { цвет: #fcf4f4; дисплей: гибкий; высота: 50 пикселей; ширина: 100%; выровнять-элементы: по центру; непрозрачность: 0; события указателя: нет; переход: все 0,5 секунды легкости; } .sidebar.active .logo_content .logo { непрозрачность: 1; события указателя: нет; } .logo_content .logo я { размер шрифта: 34 пикселей; поле справа: 5 пикселей; } .logo_content .logo .logo_name { размер шрифта: 20 пикселей; вес шрифта: 400; } .сайдбар #btn { позиция: абсолютная; цвет: #ffffff; /*клейр*/ осталось: 50%; верх: 6 пикселей; размер шрифта: 20 пикселей; высота: 50 пикселей; ширина: 50 пикселей; маржа сверху: 10 пикселей; выравнивание текста: по центру; высота строки: 50 пикселей; преобразование: TranslateX (-50%); граница: 2 пикселя сплошной RGB (255, 255, 255, 0,0); box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); радиус границы: 12 пикселей; переход: легкость 0,5 с; } .sidebar #btn:hover { /* цвет границы:#007bff; */ цвет границы: #007bff; цвет: #1d1b31; /*клейр*/ } .sidebar.active #btn { осталось: 90%; преобразование: TranslateX (-75%); } .сайдбар ул { поле сверху: 55 пикселей; } .sidebar уль ли { положение: относительное; высота: 50 пикселей; ширина: 100%; маржа: 0%; стиль списка: нет; высота строки: 50 пикселей; поле: 30 пикселей 0; } .sidebar ul li .tooltip { позиция: абсолютная; слева: 130 пикселей; /* отключить блокировку ввода*/ верх: 0%; трансформировать: транслировать(-50%, -50%); радиус границы: 6 пикселей; высота: 35 пикселей; ширина: 122 пикселей; фон: прозрачный; высота строки: 35 пикселей; выравнивание текста: по центру; box-shadow: 0 5px 10px rgba(0, 0, 0, 1.0); фоновый фильтр: размытие (20 пикселей); переход: 0 с; непрозрачность: 0; события указателя: нет; дисплей: блок; цвет: #ff0000; } .sidebar.active ul li .tooltip { дисплей: нет; } .sidebar ul li:hover .tooltip { переход: все 0,5 секунды легкости; непрозрачность: 1; верх: 50% } .sidebar ul li input { позиция: абсолютная; высота: 100%; ширина: 100%; слева: 0; верх: 0; радиус границы: 12 пикселей; контур: нет; граница: нет; фон: прозрачный; box-shadow: 0 5px 10px rgba(0, 0, 0, 1.0); граница: 2 пикселя сплошной RGB (255, 255, 255, 0,0); отступ слева: 50 пикселей; размер шрифта: 18 пикселей; цвет: #fff; переход: все 0,5 секунды легкость } .sidebar ul li input::placeholder { цвет: #5e5d5d; } .sidebar ul li:hover input { цвет границы: #007bff; } .sidebar ul li .bx-search { позиция: абсолютная; z-индекс: 99; цвет: RGB(255, 255, 255); размер шрифта: 22 пикселей; переход: все 0,5 секунды легкость } .sidebar уль ли а { цвет: #fff; дисплей: гибкий; выровнять-элементы: по центру; текстовое оформление: нет; переход: все 0,5 секунды легкости; box-shadow: 0 5px 10px rgba(0, 0, 0, 1.0); граница: 2 пикселя сплошной RGB (255, 255, 255, 0,0); радиус границы: 12 пикселей; пробел: nowrap; } .sidebar ul li a:hover { цвет границы: #007bff; } .sidebar уль ли я { высота: 50 пикселей; минимальная ширина: 45 пикселей; радиус границы: 12 пикселей; высота строки: 50 пикселей; выравнивание текста: по центру; } .sidebar .links_name { непрозрачность: 0; события указателя: нет; переход: все 0,5 секунды легкости; } .sidebar.active .links_name { непрозрачность: 1; события указателя: авто; } .социальные медиа { позиция: абсолютная; внизу: 0; слева: 0; ширина: 100%; } .social_media #linked { позиция: абсолютная; осталось: 50%; внизу: 5 пикселей; преобразование: TranslateX (-50%); минимальная ширина: 50 пикселей; высота строки: 50 пикселей; размер шрифта: 20 пикселей; радиус границы: 12 пикселей; белый цвет; выравнивание текста: по центру; непрозрачность: 0; фон: прозрачный; переход: все 0,3 секунды легкости; box-shadow: 0 5px 10px rgba(0, 0, 0, 1.0); граница: 2 пикселя сплошной RGB (255, 255, 255, 0,0); } .sidebar.active .social_media #linked { слева: 13,6%; непрозрачность: 1; } /* эффективная связь */ .social_media #linked:hover { цвет границы: #007bff; } .social_media #log_out { позиция: абсолютная; осталось: 50%; внизу: 5 пикселей; преобразование: TranslateX (-50%); минимальная ширина: 50 пикселей; высота строки: 50 пикселей; размер шрифта: 20 пикселей; радиус границы: 12 пикселей; белый цвет; выравнивание текста: по центру; фон: прозрачный; box-shadow: 0 5px 10px rgba(0, 0, 0, 1.0); граница: 2 пикселя сплошной RGB (255, 255, 255, 0,0); } .sidebar.active .social_media #log_out { осталось: 87% } .social_media #log_out:hover { цвет границы: #007bff; } .home_content { позиция: абсолютная; высота: 100%; ширина: расчет (100 % – 78 пикселей); слева: 78 пикселей; переход: все 0,5 секунды легкости; } .home_content .text { размер шрифта: 25 пикселей; вес шрифта: 500; цвет: #b4b3be; поле: 12 пикселей; } .sidebar.active~.home_content { ширина: расчет (100% -240 пикселей); левый: 240 пикселей; [*] Мое портфолио
- Поиск Панель управления ... [i][/i] # Верхний заголовок
Я попробовал изменить эффект размытия, а также изменить значение Z. Ни одна из модификаций не повлияла на результат.
