Question

我试着写＆＃34; HIDE＆＃34; - ＆＃34; SHoW＆＃34;内容仅与CSS。但是当我打开下面的段落时，我需要隐藏+（class =＆＃34; span2＆＃34;）。我该怎么办？

＆＃13;

p {
  display: block;
}
.question {
  position: relative;
  width: 70%;
  display: block;
  background-color: yellow;
  padding-left: 1%;
  padding-right: 1%;
}
.alert {
  display: none;
}
h1 {
  display: block;
  font-size: 2em;
  position: relative;
}
.span2,
.span3 {
  position: absolute;
  bottom: 0;
  right: 1em;
  font-size: 2em;
  vertical-align: bottom;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}

＆＃13;

<div class="question">
  <h1 align="left">More about/ Question</h1>
  <span class="span2" align="right" tabindex="0">+</span>


  <p class="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel sagittis metus, non commodo tortor. Donec vitae rutrum metus, a dictum nunc. Curabitur metus turpis, mattis sed libero vel, lacinia blandit nisl. Curabitur at accumsan ipsum, vitae
    vestibulum orci. Morbi accumsan dui odio, id varius mauris fermentum a. <span class="span3" align="right" tabindex="-1">-</span>
  </p>

</div>

＆＃13;

所以，我不想使用JAVA。可能我应该使用主动...或链接跨度到h1内容和写后（显示：无）...但我不知道：/

Answer 1

还有很多其他解决方案但您可以在CSS中使用伪元素:before或:after来实现这一诀窍：see this fiddle

.span2:before { content: "+"; }
.span2:focus:before { content: "";}

使用tabindex隐藏跨度

1 个答案: