если изменять поле с результатом от 700px и ниже, то скрытый текст при ховере перестанет показываться. Это, конечно, хорошо, но есть ли варианты, чтобы скрытый текст все-таки показывался при наведении курсора и в данном диапазоне тоже, но как только страницу станут скроллить, он сразу исчезал.
1. Хардкодить тексты в JS - приемлемо только в целях демонстрации, во всех остальных случаях вам будет категорически неудобно пользоваться такой системой,
2. У вас просто в CSS есть правило, которое скрывает их при ширине ниже 700, достаточно его убрать,
3. Как один из вариантов можно просто при скролле вешать на общий для нужных элементов класс, который будет скрывать эти элементы,
спасибо за ответ, но если есть непосредственно решение по данному вопросу, пожалуйста, напишите. по пункту 2 - к сожалению, не достаточно убрать это правило, так как мне нужно, чтоб скрытый элемент при ховере отображался, но как только пользователь начал скроллить, он исчезал.
Наталия: правило для класса (который вы будете вешать на body, например) и media правило абсолютно никак не связаны, вы можете удалить media и иметь требуемый функционал.
К сожалению (для кого-то из нас), я придерживаюсь мнения, что основная функция тостера это обмен опытом. Поэтому я всё же стараюсь больше делиться опытом и отвечать на теоретические вопросы, чем решать за других их проблемы. К тому же, весь нужный материал у вас есть: по ссылке описан алгоритм как раз делающий то что вам нужно.
1. Повесить на нужные элементы класс.
2. В jQuery есть замечательная функция .scroll(). Как аргумент, передать этой функции handler для обработки события: в твоем случае, заставить исчезнуть нужный элемент и убрать ему псевдокласс :hover.
3. Насладиться результатом.
P.S.: Вот тут есть пример - https://api.jquery.com/scroll/#entry-examples
