Question

我有这样的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？

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

Answer 2

你可以使用hack来实现这一目标，如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才能做到这一点，请点击其他几个答案。

Answer 3

我不相信你可以只使用CSS，你可以尝试：active标志，但只有当用户按住点击时才会起作用。

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

Answer 4

最简单的方法是使用JavaScript然后在.click（）下应用.css（）函数。浏览任何教程，您将学习如何在没有任何重大帮助的情况下完成此任务。如果您仍然感到困惑，请评论代码。

是否可以通过单击CSS中的图像来显示<div>？</div>

4 个答案: