Как скрыть блок на странице (продолжение)
{"ops":[{"attributes":{"color":"green","size":"16px","link":"https://programmerblog.ru/article/8"},"insert":"Начало в предыдущей статье."},{"attributes":{"color":"green","size":"16px"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Следующее свойство для скрытия элемента "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"visibility."},{"attributes":{"color":"black","size":"16px"},"insert":" Если установить значение "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"hidden"},{"attributes":{"color":"black","size":"16px"},"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"opacity"},{"attributes":{"color":"black","size":"16px"},"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"transition."},{"attributes":{"color":"black","size":"16px"},"insert":" Дочерние элементы тега со свойством"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: hidden"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"могут быть видны, если им задать свойство "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"visibility: visible"},{"attributes":{"size":"16px"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"pointer,"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"black"},"insert":"и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока."},{"insert":"\n"}]}
See the Pen block 5 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"attributes":{"size":"16px","color":"#000000"},"insert":"Ну и конечно же мы можем скрыть элемент с помощью абсолютного позиционирования. Данное свойство может быть полезно, если нам нужен такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных выше свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. Ниже вы можете вернуть 2 блок в статическое положение кликом на первый и убрать кликом на третий."},{"insert":"\n"}]}
See the Pen block6 by Aleksa (@mariamaskina) on CodePen.
{"ops":[{"attributes":{"color":"black","size":"16px"},"insert":"И еще один способ о котором я хотела бы вам рассказать "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"clip-path"},{"attributes":{"color":"black","size":"16px"},"insert":" способ обрезки, кроме того с помощью этого способа мы можем скрывать элементы не только полностью, но и частично, но необходимо помнить, что "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"clip-path"},{"attributes":{"color":"black","size":"16px"},"insert":" не полностью поддерживается в "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"IE"},{"attributes":{"color":"black","size":"16px"},"insert":" и"},{"attributes":{"color":"green","size":"16px","bold":true},"insert":" Edge"},{"attributes":{"color":"black","size":"16px"},"insert":", особенно если использовать внешний файл. "},{"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Давайте теперь посмотрим, что у нас получилось. Второй и третий блоки скрыты полностью, четвертый и пятый частично. Для того, чтобы увидеть полностью скрытые блоки кликните на первый блок, чтобы скрыть на пятый."},{"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Это все, что я хотела рассказать в этой статье."},{"insert":"\n\n"}]}
See the Pen Block 7 by Aleksa (@mariamaskina) on CodePen.