我刚刚遇到了仅使用css创建的切换切换按钮.它被称为复选框黑客.
对于那些不知道复选框css hack是什么的人,请在这里阅读
https://css-tricks.com/the-checkbox-hack/
我试了一下,它工作得非常好.但我不明白这是如何工作的,因为我们没有点击复选框.
所以我有2个问题
这是怎么回事？
我尝试了它而不是绝对定位 display: none;
它仍然有效.这种方法有什么缺点吗？
我正在尝试添加此功能,当单击"."时,hr元素的背景颜色应从灰色变为白色,并在活动时保持白色.
再次按下它应该回到灰色.
我用jQuery实现了这个 - 有没有办法用纯CSS做到这一点？
代码在这里:https://jsfiddle.net/e3ux2ffb/
CSS:*
{
margin:0 auto;
padding:0px;
}
.top {
background-color:black;
width: 100%;
height: 60px;
}
.icon {
width: 28px;
border:1px solid gray;
padding:5px;
float:right;
position:relative;
top:50%;
-webkit-transform: translateY(-50%);
margin-right:10px;
}
.icon hr:not(:first-child) {
margin-top:5px;
}
.icon hr {
height: 2px;
background-color:gray;
border:0px;
}
.icon:hover {
cursor:pointer;
}
.icon:active, .icon:focus {
background-color:white;
}
HTML:
<div class="top">
<div class="icon">
<span><hr><hr><hr></span>
</div>
</div>
这是网页代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" >
</head>
<body>
<script>
function func() {
// do some checks
window.location = "http://google.com";
}
</script>
<a href="http://google.com">link</a>
<br><br>
<a href="http://google.com"><div class="button">button 1</div></a>
<br>
<div class="button" onclick="func()">button 2</div>
</body>
</html>
这是css文件:
a, a:hover, a:visited, a:active {
color: inherit;
text-decoration: none;
}
.button {
width: 100px;
display: block;
background-color: #cccccc;
cursor: pointer;
text-align: center;
border: 1px solid #666666;
padding: 3px;
}
<a>网页开头有简单的链接 - 当用户点击某个网站加载的链接时.
然后有一个div用作按钮,它也包装在<a>标签中,当用户点击该div时它也会导致同一个站点.
然后有另一个div用作按钮,但它不包装在<a>标签中,当用户点击该div时,会调用一些javascript函数,并在一些检查后加载相同的站点.
这就是问题.当用户将鼠标悬停在链接上或首先div在用户浏览器底部显示URL( …
我有这个代码
.input {
display: flex;
flex-direction: column;
border: 1px solid #000;
height: 50px;
justify-content: flex-end;
}
.input > * {
padding: 5px;
}
#login {
visibility: hidden;
height: 0px;
transition: .2s
}
#login:active {
visibility: visible;
height: 10px;
}<div class="input">
<label for="login" id="login1">Login</label>
<input type="text" id="login">
</div>点击标签后我需要输入显示.但是只有当我按住鼠标按钮时它才有效.有没有办法在不使用JS的情况下点击输入？
在 javascript 中，您可以直接从 html 元素轻松执行 onclick 事件：
<div onclick="..javascript here.."></div>
我知道您可以使用 < style > 标签更改 css 样式，但我想知道您是否能够像下面的示例一样执行它：
<div onclick="..css here.."></div>