我有这样的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?
答案 0 :(得分: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>
答案 1 :(得分:1)
你可以使用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才能做到这一点,请点击其他几个答案。
答案 2 :(得分:0)
我不相信你可以只使用CSS,你可以尝试:active标志,但只有当用户按住点击时才会起作用。
对于javascript,只需在onclick事件触发时将类附加到元素。 我建议使用element.classList:https://developer.mozilla.org/en-US/docs/Web/API/element.classList
答案 3 :(得分:-1)
最简单的方法是使用JavaScript然后在.click()下应用.css()函数。浏览任何教程,您将学习如何在没有任何重大帮助的情况下完成此任务。如果您仍然感到困惑,请评论代码。