使用 active class 的不透明过渡

Question

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

代码：

#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 伪 class。当您在 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 的简单说明。您可以将其替换为不透明度 0 以达到类似的效果。如果您想要更多示例，以下 link 将引导您完成更深入的示例 - http://www.vanseodesign.com/css/click-events/

使用 active class 的不透明过渡

Opaque transition using active class

css

opacity

pseudo-element

css-transitions