我有一个图像元素,我想在点击时改变它。
<img id="btnLeft">
如此:
#btnLeft:hover {
width: 70px;
height: 74px;
}
但我需要的是:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
但是,很明显,这是行不通的。是否有可能在CSS中有onclick行为(即,不使用JavaScript)?
我有一个图像元素,我想在点击时改变它。
<img id="btnLeft">
如此:
#btnLeft:hover {
width: 70px;
height: 74px;
}
但我需要的是:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
但是,很明显,这是行不通的。是否有可能在CSS中有onclick行为(即,不使用JavaScript)?
当前回答
根据您想要做的事情,让焦点保持变化可能是一种选择?
<button></button>
<style>
button {
width: 140px;
height: 70px;
background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
background-size: cover;
}
button:focus {
width: 240px;
height: 120px;
}
</style>
https://jsfiddle.net/anm92d0r/
注意,这对image标签不起作用。但根据你的元素id,我假设你在寻找按钮功能。
其他回答
您可以使用伪类:target来模拟打开单击事件。让我给你们举个例子。
#{东西 显示:没有; } {#的东西:目标 显示:块; } < a href = " #“>显示< / > < div id = "东西" >宾果!< / div >
这是它的样子:http://jsfiddle.net/TYhnb/
需要注意的一点是,这仅限于超链接,因此如果您需要在其他超链接上使用,例如按钮,您可能需要稍微修改一下,例如将超链接样式化,使其看起来像按钮。
下面是一个类似于JavaScript的onclick的onclick,而不是:active伪类。
这只能通过JavaScript或复选框Hack来实现。
复选框黑客本质上是让你点击一个标签,“检查”一个复选框,允许你按照自己的意愿设置标签的样式。
这个演示。
在OP澄清他想要什么之前回答了。
我有以下代码的鼠标悬停和鼠标点击,它的工作:
//For Mouse Hover
.thumbnail:hover span{ /* CSS for enlarged image */
visibility: visible;
text-align: center;
vertical-align: middle;
height: 70%;
width: 80%;
top: auto;
left: 10%;
}
当你点击图像时,这段代码会隐藏图像:
.thumbnail:active span {
visibility: hidden;
}
你能得到的最接近的是:active:
#btnLeft:active {
width: 70px;
height: 74px;
}
但是,这只会在按住鼠标按钮时应用样式。应用样式并保持它在click上应用的唯一方法是使用一点JavaScript。
如果你给元素一个标签索引,那么你可以使用:focus伪类来模拟点击。
# btnLeft:{焦点 宽度:70 px; 身高:74 px; } <img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>