通过单击另一个元素来更改元素的 css 样式

Question

我有这个结构：

 <div id="d1">
Text
<div id="d2">Word</div>
<a href="#hide">My other text</a>
</div>

现在，我希望点击 #hide:target ， div#d2 消失。

我可以用 CSS 做到这一点吗？

原文由 Theraloss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以用 CSS 做到这一点！

如果您稍微更改 HTML 标记，您可以使用 CSS :target

     #d2:target {
        display: none;
    }

     <div id="d1">
      Text
    <div id="d2">Word
      <a href="#d2">My other text</a>
    </div>

原文由 idmean 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 css 我认为这是不可能的，但你可以使用我在这里放的这段代码，它基于 javascript，在这种情况下非常有用。我不太擅长解释，但对于这类问题，我建议学习 Javascript。

 <div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>

这是你现在的 HTML 文件，我创建了一个 DOM 事件，当你点击 时，一个名为 hide() 的函数将在我们的 js 文件中运行。提示：不要忘记将 html 与 de javascript 文件链接。你可以这样做：

 <script src="yourfilegoeshere"><script>

现在让我们进入css：

 #d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}

基于这个css，它们都是可见的。现在让我们转到我们的 Js 文件：

 function hide() {
  var d2 = document.getElementById('d2')
  d2.style.opacity = '0'
}

现在，如果您单击 a d2 将不可见

我希望我有所帮助！

原文由 Feijão FuturoTurco 发布，翻译遵循 CC BY-SA 4.0 许可协议