使用活动类的不透明过渡

Question

我需要 CSS 方面的帮助。我正在尝试使其在另一个 div 被单击作为过渡时将 div 的不透明度设置为 1。我只能使用 CSS，所以我试图找出如何使用活动类来执行此操作或任何其他方法。

代码：

#reveal {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
#ss {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
  opacity: 1;
  transition: all 4s;
}

<div id="reveal"><b>Requirements:</b>
  <br>
  <li>Shinigami present approximately 130 years from the present.
  <li>Someone with some understanding of Quincy lore.
  <li>People willing to fight a Quincy stronger than them.
  <li>Shinigami who will remember this.
  <li>Willingness to potentially expand upon this in the present.</li>
  <br>
  
  <b>Optional Additions</b>
  <li>Hollow/Arrancar present approximately 130 years from the present.
  <li>Anything at someone else may want to do using this for themselves.</li>
  <br>
  <i>Click for a brief synopsis.</i>
</div>

<br>
<br>
<br>

<div id="ss"><b>Synopsis:</b>
  <br>
  <br>Lena Heinrich, the embodiment of destruction. She is an immensely powerful being and an undeniably substantial threat to the balance of the living world and spiritual world. Her relentless annihilation of countless Hollows has been known to us for some
  time. She is beyond reason and control at this point and must be eliminated to protect both worlds.
  <br>
  <br>Already Shinigami have fallen to her, she silences all that might dissuade her from her path of destruction. No longer can we ignore such a dire threat. We must establish a sortie with a number of powerful Shinigami to bring her down; she is not to
  be underestimated, few Quincy have existed as powerful as her…
  <br>
  <br>Interested? Post below and I'll sort things out ;)
</div>

Answer 1

仅使用 CSS，您可以使用 :focus 伪类。当您在div 上focus 时，您可以在那里应用任何CSS 规则。还要在divs 中添加一个tabindex 属性。

看一个例子：

#reveal {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
#ss {
  color: #cbd3db;
  font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
}
div#reveal:focus, div#ss:focus {
  color: black ;
  transition: all 4s;
}

<div id="reveal" tabindex=1>
  <b>Requirements:</b>

  <li>Shinigami present approximately 130 years from the present.
  <li>Someone with some understanding of Quincy lore.
  <li>People willing to fight a Quincy stronger than them.
  <li>Shinigami who will remember this.
  <li>Willingness to potentially expand upon this in the present.</li>
  <br/>

  <b>Optional Additions</b>
  <li>Hollow/Arrancar present approximately 130 years from the present.
  <li>Anything at someone else may want to do using this for themselves.</li>
  <br>
  <i>Click for a brief synopsis.</i>
</div>

<div id="ss" tabindex=2><b>Synopsis:</b>
  <br>
  <br>Lena Heinrich, the embodiment of destruction. She is an immensely powerful being and an undeniably substantial threat to the balance of the living world and spiritual world. Her relentless annihilation of countless Hollows has been known to us for some
  time. She is beyond reason and control at this point and must be eliminated to protect both worlds.
  <br>
  <br>Already Shinigami have fallen to her, she silences all that might dissuade her from her path of destruction. No longer can we ignore such a dire threat. We must establish a sortie with a number of powerful Shinigami to bring her down; she is not to
  be underestimated, few Quincy have existed as powerful as her…
  <br>
  <br>Interested? Post below and I'll sort things out ;)
</div>

顺便说一句，您的标记根本无效。

Answer 2

CSS 并不是用来处理点击事件的，但是有一些使用伪选择器/元素的技巧可以满足您的需求。请记住，应避免以这种方式操作元素。使用几行 jQuery 就可以非常容易地实现您的目标，所以如果您有选择，我建议您这样做。如果没有，CSS :target hack 在这里可能会有所帮助。

您的 HTML：

<a href="#alert">Click Me</a>
<div id="alert">
  <p>some alarming information here</p>
</div>

还有你的 CSS：

#alert {
  display: none;
}

#alert:target {
  display: block;
}

上面的例子是一个使用 display:none 的简单说明。你可以用 opacity 0 换掉它来达到类似的效果。如果您想要更多示例，以下链接将引导您了解更深入的示例 - http://www.vanseodesign.com/css/click-events/