隐藏li标签内的文字

时间:2015-05-10 23:54:01

标签: html html-lists

所以我有三个li标签,背景将被替换为图像,当你将鼠标悬停在元素上时,它会变得更大,你会看到完整大小的图像(保持原来的宽度)。但是我希望隐藏li里面的文本,当你将它悬停在它上面时,我想要显示它。我不确定如何选择里面的文字。我尝试了这个属性:之后但没有工作。任何帮助表示赞赏:)

MediaItem

<ul id="crew">
<li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li>

<li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li>

<li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother, possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li>

2 个答案:

答案 0 :(得分:0)

您无法选择文字&#34;对于元素,您只能选择包含该文本的元素。也就是说,我建议 - 假设您发布的其余代码按照您的要求运行 - 以下内容应显示/隐藏文本:

&#13;
&#13;
li {
  /* 'transparent' a color keyword (like 'red,' 'white,' 'black,' etc)
     equivalent to an rgba() color with its alpha set to 0: */
  color: transparent;

  /* aesthetics; irrelevant to the demo, adjust to taste: */
  border: 1px solid #000;
  padding: 0.5em;
  margin: 0 0 0.5em 0;
  list-style-type: none;
}

li:hover {
  /* the changed color when the list is hovered-over: */
  color: #000;
}
&#13;
<ul id="crew">
  <li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen
    different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li>

  <li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment
    of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li>

  <li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother,
    possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li>
</ul>
&#13;
&#13;
&#13;

如果您需要使用CSS过渡,当然可以设置动画:

&#13;
&#13;
li {
  color: transparent;
  border: 1px solid #000;
  padding: 0.5em;
  margin: 0 0 0.5em 0;
  list-style-type: none;

  /* transitioning the color property, over 0.6 seconds, with
     an animation of 'ease-in-out': */
  transition: color 0.6s ease-in-out;
}

li:hover {
  color: #000;
}
&#13;
<ul id="crew">
  <li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen
    different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li>

  <li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment
    of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li>

  <li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother,
    possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li>
</ul>
&#13;
&#13;
&#13;

参考文献:

答案 1 :(得分:0)

试试这个..

使用CSS text-indent Property

显示悬停:

#crew li{display:inline-block;list-style-type:none;
border-radius:20px;
overflow:hidden;
vertical-align:top;
text-indent: -9999; /* Add this line*/
}
.trevor{
background-color:red;
height:90px;
width:32%;
}
.trevor:hover{
background:plum;
height:500px;
width:32%;
text-indent: 0!important; /* Add this line*/
}

隐藏悬停:

#crew li{display:inline-block;list-style-type:none;
border-radius:20px;
overflow:hidden;
vertical-align:top;
}
.trevor{
background-color:red;
height:90px;
width:32%;
}
.trevor:hover{
background:plum;
height:500px;
width:32%;
text-indent: -9999; /* Add this line*/
}