Блог

Как скрыть блок на странице (продолжение)

{"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"}]}

Подробнее

Как скрыть блок на странице

{"ops":[{"attributes":{"color":"black","size":"16px"},"insert":"Сегодня я расскажу вам как можно скрыть блок в разметке"},{"attributes":{"size":"16px"},"insert":" "},{"attributes":{"size":"16px","color":"green","bold":true},"insert":"HTML"},{"attributes":{"size":"16px","color":"green"},"insert":"."},{"attributes":{"size":"16px","color":"black"},"insert":" Все очень просто, самый простой способ это задать в стилях для нужного блока:"},{"insert":"\n.block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Зачем нам это нужно, например у нас существует страница и при переходе на мобильную версию, мы хотим упростить ее и не показывать данные из какого-то блока, и этот способ может очень нам помочь, достаточно только добавить миксин в стили, с классом нашего блока, например:"},{"insert":"\n@media (max-width: 767px) {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"black","size":"16px"},"insert":"Давайте создадим три блока и уберем один из разметки, средствами "},{"attributes":{"color":"green","size":"16px","bold":true},"insert":"CSS."},{"insert":"\n"}]}

Подробнее