<li> img и описание исчезает при отображении: ни один не применяется

Question

Мой элемент li имеет фоновое изображение img, а текст записан сбоку.Я хочу отобразить: нет только текст и сделать так, чтобы он появлялся только при зависании.Однако, если я применяю display: none к элементу span, содержащему текст, он вынимает весь элемент li. Пожалуйста, проверьте прикрепленные изображения.

Элемент Li с изображением и описанием стиля списка

HTML CSS

Answer 1

Взгляните на css селекторы

Вы используете этот селектор в сообщении, поэтому я думаю, что вы не используете тот же селектор в вашем коде для выполнения отображения: нет;

#fixed ul li a span{
    display: none;
}

Применится дисплей: нет;в потомке (Любой элемент, совпадающий с span, который является потомком элемента, совпадающего с a, который является потомком элемента, совпадающего с li и т. д.

#fixed > ul > li > a > span{
    display: none;
}

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

Оба должны работать (см. пример ниже). Так что если нет, вы можете иметьошибка в вашем коде, которая применяет наследование свойства display или чего-то подобного, или ваш полный код имеет различия между обоими селекторами (возможно, вам нужно выбрать прямые потомки, а вы выбираете потомков).

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

Другая возможная причина в том, что вы можете использовать js или jquery для применения display no, и это не перехватывает селектортак что попробуйте проверить и определить, где применяется свойство display (возможно, вы закодировали $('#fixed').hide();?

ul#first > li > a > span{display: none;}

ul#second li a span{display: none;}

<ul id="first">
  <code>ul#first > li > a > span{display: none;}</code>
  <li><a href="#">icon- <span>a</span></a></li>
  <li><a href="#">icon- <span>b</span></a></li>
</ul>

<ul id="second">
  <code>ul#second li a span{display: none;}</code>
  <li><a href="#">icon- <span>a</span></a></li>
  <li><a href="#">icon- <span>b</span></a></li>
</ul>

<ul id="third">
  <code>No css applied</code>
  <li><a href="#">icon- <span>a</span></a></li>
  <li><a href="#">icon- <span>b</span></a></li>
</ul>

Answer 2

Вы можете попробовать это.Вы увидите текст на изображении при наведении, используя только CSS.

body 
{
  font-family: sans-serif;
}
.image-hover-text-container 
{
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  transition: all 0.2s linear;
}

.image-hover-image 
{
 display: block;
}
/* Make the image round */
.image-hover-image img
{
  border-radius: 0%;
  width: 300px;
}



.image-hover-text 
{
  position: absolute;
  top: 0;
  width: 100%;  
  height: 100%;
  margin: 0 auto;
  opacity: 0;
  cursor: default;
  transition: opacity 0.2s linear;
}
.image-hover-text:hover 
{
  opacity: 1;
}


.image-hover-text-bubble 
{
  position: relative;
  box-sizing: border-box;
  top: 0; left: 0; right: 100%;
  height: 100%;
  text-align: center;
  background: rgba(218, 211, 211, 0.9);
  border-radius: 0%;
  margin: 0 auto;
  padding: 30% 0px;
  overflow: hidden;
  font-size: 17px;
  text-align: center;
  word-wrap: break-word;
}

.image-hover-text .image-hover-text-title
{
  font-size: 25px;
  display: block;
}

<div class="image-hover-text-container">
  <li class="image-hover-image">
    <img src="http://dummyimage.com/600x400/38acf0/a9e1f2.jpg">
  </li>
  <div class="image-hover-text">
    <div class="image-hover-text-bubble">
      <span class="image-hover-text-title">Sample</span>
      This Text display on Hover the Image.
    </div>
  </div>
</div>