Question

我的li元素有一个img作为背景，文字写在一边。我想显示：none只显示文本并使其仅在悬停时显示。但是，如果我将display：none应用于包含文本的span元素，则会取出整个li元素。请检查附加的图像。

Li Element with list style image and description

Answer 1

你可以试试这个。您将仅使用在悬停图像上显示文本的CSS。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

查看css selectors

你在帖子上使用这个选择器所以我认为你没有在你的代码上使用相同的选择器来执行display：none;

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

这将应用display：none;以子孙的方式（任何元素匹配的跨度是匹配a的元素的后代，它是与li等匹配的元素的后代。

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

这是一种更“严格”的方式来做几乎相同的（任何元素匹配的跨度是匹配等的元素的直接子元素）

两者都应该有效（参见下面的例子）。因此，如果没有，您的代码可能会出现应用继承显示属性或类似内容的错误，或者您的完整代码在两个选择器之间存在差异（可能您需要选择直接子项并且您选择后代）。

首先尝试应用直接子选择器，只需添加＆gt;在后代之间，如果没有工作，请检查并尝试查找继承的应用位置。

另一个可能的原因是你可能正在使用js或jquery来应用display none而且它没有正确捕获选择器，所以尝试检查和fins应用了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>

当显示：无应用时，<li> img和描述消失

2 个答案: