Question

我需要CSS的帮助。我试图使它成为一个div的不透明度设置为1当另一个div被点击作为转换。我只能使用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伪类。当您focus上的div时，您可以在那里应用任何CSS规则。同时添加到divs一个tabindex属性。

查看示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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交换以实现类似的效果。如果您想了解更多示例，以下链接将引导您深入了解示例 - http://www.vanseodesign.com/css/click-events/

使用活动类的不透明过渡

2 个答案: