Как скрыть элемент при отображении: ни один не работает

Question

Вот сделка. У меня проблемы при попытке скрыть элемент абзаца с классом "text". Ссылка на перо Я пробовал отображать: нет, но у меня это тоже не сработало.

    <style>
    .img {
      position: absolute;
      left: 40%;
      transform: translateX(-50%);
    }
    .p-wrap {
      color: #fff;
      position: relative;  
      display: none;
    }
    .text {   
      display:none;
      color: #000;
      position: absolute;
      left: -130px;
    }
   </style>

  <div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>

Answer 1

кроме отображения: нет, другие альтернативы

1. видимость: скрытая;
2. непрозрачность: 0

Но будьте осторожны с этим элементом все еще присутствует в DOM (пространство все еще выделено.)

Answer 2

Вы пропустили заключительную кавычку в div с классом p-wrap, поэтому ваш DOM сгенерирован неправильно.

<div class="img">
  <div class="p-wrap">
         <p class="text"> Oh hey Mark</p>
  </div>
  <img
    src="https://nypdecider.files.wordpress.com/2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>

Это исправит это.

Answer 3

Существует несколько способов скрыть элемент в CSS. Вы можете скрыть его, установив непрозрачность на 0, видимость на скрытый, отобразить на ноль или установив крайние значения для абсолютного позиционирования. Задумывались ли вы, почему у нас так много способов скрыть элемент, когда кажется, что все они делают одно и то же? Все эти методы на самом деле немного отличаются друг от друга, и это различие диктует, какой из них следует использовать в конкретной c ситуации. В этом руководстве будут рассмотрены незначительные различия, которые необходимо учитывать при сокрытии элемента любым из перечисленных выше способов.

Непрозрачность

Непрозрачность свойства предназначена для установить прозрачность элемента. Он не был разработан, чтобы каким-либо образом изменить ограничивающую рамку элемента. Это означает, что установка непрозрачности на ноль только скрывает элемент визуально. Элемент по-прежнему занимает свою позицию и влияет на макет веб-страницы. Он также будет реагировать на взаимодействие с пользователем.

.hide {
  opacity: 0;
}

Visibility

Это свойство также может анимироваться, если начальное и конечное состояния имеют разные значения , Это гарантирует, что переход между состояниями видимости может быть плавным, а не резким.

.hide {
   visibility: hidden;
}

Отображение

Все потомки нашего элемента будут скрыты как хорошо. Это свойство нельзя анимировать, поэтому переход между различными состояниями всегда будет резким.

Обратите внимание, что элемент по-прежнему доступен через DOM. Вы сможете манипулировать им, как и любым другим элементом.

.hide {
   display: none;
}

Позиция

Предположим, у вас есть элемент, с которым вы хотели бы взаимодействовать, но вы не хочу, чтобы это влияло на макет вашей веб-страницы. Никакое свойство до этого момента не может справиться с этой ситуацией должным образом. Одна вещь, которую вы можете сделать в этой ситуации, это переместить элемент из области просмотра. Таким образом, это не повлияет на макет и все равно будет действовать. Вот что нужно сделать CSS:

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Путь клипа

Еще один способ скрыть элементы - это обрезать их. Раньше это можно было сделать с помощью свойства clip, но оно устарело в пользу лучшего свойства, называемого clip-path. Niti sh Кумар недавно представил свойство clip-path здесь, в SitePoint, поэтому не стесняйтесь проверять его для более расширенного использования свойства!

Имейте в виду, что свойство clip-path используется ниже. еще не полностью поддерживается в IE или Edge. При использовании внешних файлов SVG для вашего пути клипа, поддержка еще более ограничена (что не применимо ниже). Свойство clip-path при использовании для скрытия элемента выглядит так:

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

Answer 4

Использование visibility:hidden

.img {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
}
.p-wrap {
  color: #fff;
  position: relative;  
  display: none;
}
.text {   
  visibility:hidden;
  color: #000;
  position: absolute;
  left: -130px;
}
  

<div class="img">
   <div class="p-wrap">
     <p class="text"> Oh hey Mark</p>
   </div>
  <img
    src="https://source">
 </div>