我有一个图像元素,我想在点击时更改它。
<img id="btnLeft">
这个有效:
#btnLeft:hover {
width: 70px;
height: 74px;
}
但我需要的是:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
但是,显然,它不起作用。是否有可能在 CSS 中实现 onclick
行为(即不使用 JavaScript)?
最佳答案
仅使用 CSS 模拟实际 click 事件的最佳方法(实际上是唯一方法*)(而不是仅仅悬停在元素上或使元素处于事件状态,在这种情况下您没有 mouseUp ) 是使用复选框 hack。它通过标签的 label
属性将 <input type="checkbox">
附加到 for=""
元素来工作。
此功能具有 broad browser support(:checked
伪类是 IE9+)。
将相同的值应用于 <input>
的 ID 属性和随附的 <label>
的 for=""
属性,您可以告诉浏览器使用 :checked
伪类重新设置点击标签的样式,这要归功于点击标签将选中和取消选中“关联的”<input type="checkbox">
。
* 您可以通过 IE7+ 中的 :active
或 :focus
伪类模拟“选定”事件(例如,对于通常为 50px
宽的按钮,您可以在 active
: #btnControl:active { width: 75px; }
时更改其宽度),但这些不是真的“点击” ”事件。它们在元素被选择的整个过程中都是“事件的”(例如通过 Tabbing 与您的键盘),这与真正的点击事件有点不同,后者会在 - 通常 - mouseUp
上触发一个 Action .
checkbox hack 的基本演示(您所要求的基本代码结构):
label {
display: block;
background: lightgrey;
width: 100px;
height: 100px;
}
#demo:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>
在这里,我将标签放置在标记中的输入之后。这样我就可以使用 adjacent sibling selector(+ 键)仅选择紧跟在我的 #demo
复选框之后的标签。由于 :checked
伪类应用于复选框,因此 #demo:checked + label
仅在复选框被选中时应用。
在点击时调整图像大小的演示,这就是您要问的:
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>
话虽如此, 还是有一些坏消息。因为标签只能是 associated with one form control at a time ,这意味着您不能只在 <label></label>
标签内放置一个按钮然后就此结束。但是,我们可以使用一些 CSS 使标签的外观和行为与 HTML 按钮的外观和行为非常接近。
模拟按钮点击效果的演示,超出您的要求:
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 20px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:20px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin-left: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
outline: 1px solid black;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}
<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>
此演示中的大部分 CSS 仅用于设置标签元素的样式。如果您实际上不需要按钮,并且任何旧元素都足够,那么您可以删除此演示中的几乎所有样式,类似于我上面的第二个演示。
关于html - 我可以在 CSS 中使用 onclick 效果吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13630229/