是否可以通过单击 CSS 中的图像来显示 <div> ？ [复制]答案

【问题标题】：Is it possible to show a <div> by clicking an image in CSS? [duplicate]是否可以通过单击 CSS 中的图像来显示 <div> ？ [复制]
【发布时间】：2014-12-14 17:46:38
【问题描述】：

我有一个这样的 HTML 代码：

<html>
<head>
<style>
img.settings {
    hight: 100px;
    width: 20px;
}

div.settings {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 100%;
    bottom: 0px;
    background-color: #000000;
}
</style>
</head>
<body>
<div class="head">
    <img class="settings" src="settings.png" />
</div>
<div class="settings"></div>
</body>
</html>

如果我单击图像，我希望将 div#settings 属性 right: 100%; 更改为 right: 50%;。换句话说，我希望通过单击图像来显示/隐藏<div>。（仅）css可以吗？

【问题讨论】：

如果没有 JavaScript，您将无法做到这一点。 CSS 定义样式，而不是交互。
如果他们是兄弟姐妹，你可以（或多或少）在 CSS 中做到这一点。但是由于没有父选择器，所以不能。
你用第二个</head>标签结束你的代码。应该是</html>。
哎呀！现已修复...@Krzysztof .
如果他们是兄弟姐妹，代码是什么？ @Oriol。

标签： css

【解决方案1】：

由于没有父选择器，因此不能仅使用 CSS。

但是，如果他们是兄弟姐妹，您可以将 tabindex="-1" 添加到图像并使用类似

img.settings:focus + div.settings {
  right: 50%;
}

img.settings {
  height: 100px;
  width: 20px;
}
div.settings {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 100%;
  bottom: 0px;
  background-color: #000000;
}
img.settings:focus + div.settings {
  right: 50%;
}

<img class="settings" src="settings.png" tabindex="-1" alt="[img]" />
<div class="settings"></div>

请注意，效果将是暂时的，并且会在您单击其他位置时结束。

如果您不想在单击自身时隐藏div.settings，请考虑

img.settings:focus + div.settings, div.settings:focus {
  right: 50%;
}

img.settings {
  height: 100px;
  width: 20px;
}
div.settings {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 100%;
  bottom: 0px;
  background-color: #000000;
}
img.settings:focus + div.settings, div.settings:focus {
  right: 50%;
}

<img class="settings" tabindex="-1" src="settings.png" alt="[img]" />
<div class="settings" tabindex="-1"></div>

【讨论】：

如果我点击其他地方怎么办？不要认为 OP 想要将固定元素移回。

【解决方案2】：

您可以使用一些技巧来实现此目的，例如 the checkbox hack，但请不要这样做。这更适合 JavaScript。

var settingsImage = document.querySelector('img.settings'),
    settingsDiv = document.querySelector('div.settings');

settingsImage.addEventListener('click', function toggleSettingsDiv() {
  settingsDiv.classList.toggle('hidden');
});

img.settings {
    hight: 100px;
    width: 20px;
}

div.settings {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 100%;
    bottom: 0px;
    background-color: #000000;
}
.hidden {
  display: none;
}

<div class="head">
    <img class="settings" src="settings.png" />
</div>
<div class="settings hidden">Lorem Ipsum</div>

不，您并不真的需要 jQuery 来执行此操作，尽管这里有其他几个答案。

【讨论】：

【解决方案3】：

我不相信你可以只使用 CSS，你可以尝试 :active 标志，但我认为只有在用户按住点击时才有效。

对于 javascript，您只需在 onclick 事件触发时将一个类附加到元素。我建议使用 element.classList：https://developer.mozilla.org/en-US/docs/Web/API/element.classList

【讨论】：

【解决方案4】：

最简单的方法是使用 JavaScript，然后在 .click() 下应用 .css() 函数。通过任何教程，您将学习如何在没有任何主要帮助的情况下做到这一点。如果您仍然感到困惑，请评论代码。

【讨论】：