CSS – Как показать текст при наведении курсора на класс и класс::before ⇐ CSS

[Anonymous]

С помощью CSS я создал экран, разделенный на 4 раздела, и при наведении на каждый раздел мне нужно размыть фон и показать текст в середине раздела. Мне не удалось добиться ожидаемого результата.

function onSplitLeftEnter(event) { if (event.target === document.querySelector('.split-bottom-left')) { document.querySelector('.content-left').style.opacity = 1; } else if (event.target === document.querySelector('.split-bottom-left::before')) { document.querySelector('.content-remaining-left').style.opacity = 1; } } функция onSplitLeftLeave (событие) { if (event.target === document.querySelector('.split-bottom-left')) { document.querySelector('.content-left').style.opacity = 0; } else if (event.target === document.querySelector('.split-bottom-left::before')) { document.querySelector('.content-remaining-left').style.opacity = 0; } } функция onSplitRightEnter (событие) { if (event.target === document.querySelector('.split-bottom-right')) { document.querySelector('.content-right').style.opacity = 1; } else if (event.target === document.querySelector('.split-bottom-right::before')) { document.querySelector('.content-remaining-right').style.opacity = 1; } } функция onSplitRightLeave (событие) { if (event.target === document.querySelector('.split-bottom-right')) { document.querySelector('.content-right').style.opacity = 0; } else if (event.target === document.querySelector('.split-bottom-right::before')) { document.querySelector('.content-remaining-right').style.opacity = 0; } body { маржа: 0; заполнение: 0; } .разделенный экран { дисплей: гибкий; ширина: 100vw; высота: 100вх; курсор: указатель; } .split-нижний левый, .split-bottom-right { гибкий: 1; положение: относительное; переполнение: скрыто; } .split-bottom-left::before, .split-bottom-right::before { содержание: ''; позиция: абсолютная; ширина: 100%; высота: 100%; размер фона: обложка; переход: преобразование 0,5 с; } .split-bottom-left::before { цвет фона: зеленый; преобразование: skewY (-45 градусов); Transform-Origin: внизу справа; } .split-bottom-right::before { цвет фона: красный; преобразование: skewY (45 градусов); Transform-Origin: внизу слева; } .split-bottom-left { цвет фона: черный; } .split-bottom-right { цвет фона: розовый; } .содержание { позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); выравнивание текста: по центру; цвет: #fff; непрозрачность: 0; переход: непрозрачность 0,75 с; } .content-left { осталось: 75%; непрозрачность: 0; } .content-right { слева: 25%; непрозрачность: 0; } .content-remaining-left { верх: 25%; слева: 25%; непрозрачность: 0; } .content-remaining-right { верх: 25%; осталось: 75%; непрозрачность: 0; Внизу слева Осталось Справа внизу Остаться правым