Оригинальная ссылка: Скрыть 5 способов элементов страницы с помощью CSS , перепечатывать , пожалуйста , укажите источник!
Есть много способов использовать CSS, чтобы скрыть элементы страницы. Вы можете установить непрозрачность 0, видимость устанавливается на скрытый дисплей установлен в положение или ни к абсолютному положению затем устанавливаются на невидимую область.
Вы когда-нибудь задавались вопросом, почему у нас так много методов, чтобы скрыть элементы, но все они выглядят, чтобы достичь того же эффекта? Каждый метод является на самом деле среди других методов, и есть некоторые тонкие различия, эти различия определить, какой метод использовать в конкретной ситуации. Этот учебник будет охватывать те небольшие различия, нужно помнить, позволяет выбрать выше эти методы соответствующего метода для вашей ситуации, чтобы скрыть элементы.
помутнение
Непрозрачность означает свойство обеспечивается элемент прозрачности. Это не менять элементы ограничительной рамки (ограничительная рамка) и дизайн. Это означает, что непрозрачность устанавливается в 0 можно только скрыть элементы визуально. Сам элемент продолжает занимать свои позиции макета работы и веб-страниц. Он также будет взаимодействовать с пользователем.
.hide {
непрозрачности: 0;
}
Если вы планируете использовать непрозрачности свойство скрытый элемент в программном обеспечении чтения с экрана, к сожалению, вы не можете сделать это. Элемент и все его содержимое будет читаемый экран чтения программного обеспечения, так же как и другие элементы на странице, как. Другими словами, элемент действует на последовательной и когда они непрозрачны.
Я также хотел бы напомнить один, непрозрачность свойство можно использовать для достижения некоторых больших эффектов анимации. Любое значение меньше непрозрачности свойства элемента 1 будет создан новый контекст стека (штабелирования контекста).
Смотрите примеры ниже:
Посмотрите @SitePoint привести примеры «скрытый элемент с непрозрачностью»
Когда мышь над скрытым вторым блоком, элементный плавный переход от полностью прозрачной до полной непрозрачности. Блок также установить свойство курсора на указатель, указывающий, что пользователь может взаимодействовать с ним.
видимость
Второй атрибут должен сказать видимость. Его значение устанавливается, чтобы скрыть наши скрытые элементы. Как непрозрачность собственность, скрытые элементы все еще есть наша веб-страница макета работы. И непрозрачность Разница лишь в том, что он не будет реагировать на любое взаимодействие с пользователем. Кроме того, элемент будет скрыт в экранном чтения программного обеспечения в.
Это свойство также в состоянии достичь эффектов анимации, до тех пор, как это не так же, как начальное и конечное состояние. Это гарантирует, что переход анимация между временем состоянием видимости переключения может быть гладкой (эта задержка может фактически быть достигнута со скрытыми элементами шоу и скрывать - примечание переводчика).
.hide {
видимость: скрытый;
}
Следующий пример демонстрирует прозрачность и непрозрачность, какой вид отличается:
Посмотрите @SitePoint привести примеры «скрытый элемент с видимостью»
Обратите внимание, что, если видимость элемент установлен быть скрыто, в то же время вы хотите, чтобы отобразить один из его элементов-потомков, до тех пор, как видимость этого элемента может быть явно установлена в видимый (как пример внутренней части P-- перевод .o-шкуры примечание). Попробуйте только парить на скрытые элементы, не парить в числах р тегов, вы увидите, что курсор мыши становится палец не так. На данный момент, вы щелкните мышью, щелкните событие не будет срабатывать.
В теге <div> внутри тега <р> вы можете захватить все события мыши. После того, как ваша мышь над текстом, <DIV> сама становится видимой и регистрация событий также вступит в силу.
дисплей
отобразить реальную собственность в соответствии со значением скрытых элементов. Дисплей свойство никому, чтобы гарантировать, что элементы не видны и даже не поколение коробки модели. Используя это свойство является скрытым элементом не занимает пространства. Мало того, что, когда дисплей установлен ни один хит прямого взаимодействия с пользователем, элементы не могут вступить в силу. Кроме того, Программа чтения с экрана не читает содержимое элемента. Он генерируется эффект, таким образом, как элемент полностью отсутствует.
Любой потомок этого элемента будет скрыт в то же время. Добавить анимации перехода для этого свойства является недействительным, он переключается между различными состояниями любого значения всегда вступает в силу немедленно.
Заметим, однако, по-прежнему имеют доступ к элементу через DOM. Таким образом, вы можете управлять им с помощью DOM, как операции других элементов.
.hide {
дисплей: нет;
}
Смотрите примеры ниже:
@SitePoint привести примеры «скрытый элемент с дисплеем»
Вы увидите элемент <р> внутри второго блока элементов, его собственный атрибут отображения установлен в блок, но он по-прежнему не видно. Это не видимость: скрытый и дисплей: нет Еще одно различие в. В предыдущем примере, любой потомок элементы видимость явным образом видимые может сделать его видимым, но дисплей не есть то, что, независимо от того, что их значения на дисплее, до тех пор, как элемент отображения является предком ни, они не являются не видно.
Теперь, наведите курсор мыши на элемент блока на вершине первые несколько раз, а затем нажмите на него. Это действие приводит к тому, второй блок элементов появляются, где было бы цифровое число, превышающее 0. Это происходит потому, что, даже если элементы расположены таким образом, чтобы скрыть пользователя, или может управляться с помощью JavaScript.
Позиция
Предполагая, что есть элемент, который вы хотите, чтобы взаимодействовать с ним, но вы не хотите, чтобы это влияет на макет страницы, не подходящие свойств могут справиться с этой ситуацией (непрозрачность и видимость влияет на макет, дисплей не влияет на макет, но не может взаимодействовать напрямую - Примечание переводчика). В этом случае, вы можете рассмотреть только элементы выхода из видимой области. Такой подход позволит не только повлиять на макет, есть элементы остаются могут сделать операцию. Ниже является использование этого подхода CSS:
.hide {
позицию: абсолютная;
верх: -9999px;
Слева направо : -9999px;
}
Следующий пример иллюстрирует, как скрыть путем абсолютно позиционируемых элементов, а перед ним, и что такой же эффект, как пример:
Посмотрите @SitePoint привести примеры «скрытый элемент с атрибутом позиции»
Основной принцип этого метода является то, через верхние и левых элементов устанавливается, чтобы быть достаточно большим отрицательным числом, не видно на экране. Одним из преимуществ использования этой технологии (или потенциального недостатка) является то, что он скрывает содержимое элемента может быть экран чтения программного обеспечения для чтения. Это понятно, потому что вы только собираетесь перемещать элементы за пределами видимой области, так что пользователь не может видеть его.
Вы должны избегать использования этого метода, чтобы скрыть какой-либо элемент, который может получить фокус, потому что если вы делаете, сделать этот элемент, когда фокус пользователя, может привести к неожиданному переключателя фокусировки. Этот метод часто используется при создании пользовательских флажков и переключателей. (DOM аналог с флажками и переключателями, но с помощью этого метода, чтобы скрыть истинный флажок и радио элементов, чтобы «получить» фокус переключения - примечание переводчика)
Clip-путь
Другой способ, чтобы скрыть элементы, что они достигнуты путем адаптации. В прошлом, это может быть достигнуто с помощью свойства клипа, но собственность была оставлена, заменена лучшей недвижимости называется клип-пути. Nitish Кумар недавно опубликовал «Введение Свойства clicp-пути» статью в SitePoint, читая его, чтобы узнать более продвинутое использование этого свойства.
Помните, что клип путь атрибут не поддерживается в полной мере IE или Edge. Если вы хотите использовать внешнюю SVG файлы в клип-пути, поддержка браузера еще ниже. Clip-путь свойства, используя скрытый код элемента выглядит следующим образом:
.hide {
клип путь: многоугольник (0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
Ниже приведен практический пример его использования:
Примеры см @SitePoint при условии, «с зажимом-атрибуты пути скрытые элементы.»
При наведении курсора на первый элемент, он все еще может повлиять на второй элемент, хотя второй элемент был скрыт клип-пути. При нажатии кнопки, он будет использоваться, чтобы удалить скрытый класс, давайте элементы выходят из этого положения. Карымский элементов в тексте по-прежнему может быть прочитан чтения с экрана, многие WordPress сайты используют клип-путь или предыдущий клип осуществить запись специально для чтения с экрана программного обеспечения.
Хотя мы больше не отображать сам элемент, он по-прежнему занимает прямоугольник такого размера, занимаемого поведением элементов вокруг него, как если бы это было так видно. Помните, взаимодействие с пользователем, такие как мыши или парить не может вступить в силу за пределами вырезанной области. В нашем примере, размер посевной площади равен нуль, что означает, что пользователи не смогут напрямую взаимодействовать со скрытым элементом. Кроме того, это свойство может быть реализовано с использованием множества различных переходных эффектов анимации.
вывод
В этом уроке мы рассмотрели пять различных скрыт методом CSS элемента. Каждый из этих методов немного отличается от других несколько. Знайте, что вы хотите достичь поможет вам решить, какое свойство принимает во время, вы будете в состоянии фактических потребности инстинктивно выбрали наилучший способ в соответствии с. Если скрыть элементы для этих методов есть какие-либо вопросы, пожалуйста, оставьте сообщение в комментариях.
Воспроизводится в: https: //www.cnblogs.com/imhurley/p/5664137.html