是否可以通过单击CSS中的图像来显示？_Css

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

css

是否可以通过单击CSS中的图像来显示？,css,Css,我有如下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>

我有如下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>

我要产权：100%；右转：50%；如果我点击图片。换句话说，我希望通过单击图像来显示/隐藏图像。仅使用css是否可行？

我不相信仅使用css就可以，您可以尝试使用：active标志，但我认为，只要用户按住单击按钮，该标志就有效

对于javascript，当触发onclick事件时，只需将一个类附加到元素。

我建议使用element.classList:

因为没有父选择器，所以不能只使用CSS

但是，如果它们是兄弟，您可以将tabindex=-1添加到图像中，并使用

图像设置：焦点+分割设置{ 右：50%； } img.settings{ 高度：100px；宽度：20px； } 分区设置{ 位置：固定；左：0px；顶部：0px；右：100%；底部：0px；背景色：000000； } 图像设置：焦点+分割设置{ 右：50%； }

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

您可以使用一些黑客来实现这一目标，但请不要这样做。这更适合JavaScript

var settingsImage=document.querySelector'img.settings'， settingsDiv=document.querySelector'div.settings'； settingsImage.addEventListener'click'，函数切换SettingsDiv{ 设置div.classList.toggle'hidden'； }; img.settings{ 高：100px；宽度：20px； } 分区设置{ 位置：固定；左：0px；顶部：0px；右：100%；底部：0px；背景色：000000； } .隐藏{ 显示：无； }

Lorem ipsum没有JavaScript就无法做到这一点。CSS定义的是样式，而不是交互。如果他们是兄弟姐妹，你可以或多或少地用CSS来定义。但由于没有父选择器，您不能。您的代码以第二个标记结尾。应该是的，哎呀！现在修复@如果他们是兄弟姐妹，密码是什么@奥利奥，如果我点击其他地方怎么办？不要认为OP想把固定元素移回去。