我可以有一个点击效果在CSS?

我有一个图像元素，我想在点击时改变它。

<img id="btnLeft">

如此:

#btnLeft:hover {
    width: 70px;
    height: 74px;
}

但我需要的是:

#btnLeft:onclick {
    width: 70px;
    height: 74px;
}

但是，很明显，这是行不通的。是否有可能在CSS中有onclick行为(即，不使用JavaScript)?

当前回答

下面是一个类似于JavaScript的onclick的onclick，而不是:active伪类。

这只能通过JavaScript或复选框Hack来实现。

复选框黑客本质上是让你点击一个标签，“检查”一个复选框，允许你按照自己的意愿设置标签的样式。

这个演示。

在OP澄清他想要什么之前回答了。

2012-11-29 16:34:00

其他回答

你可以使用:target。

或者通过类名过滤，使用.classname:target。

或者使用#idname:target过滤id名。

#id01:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .msg { display: none; } .close { color: white; width: 2rem; height: 2rem; background-color: black; text-align: center; margin: 20px; } <a href="#id01">Open</a> <div id="id01" class="msg"> <a href="" class="close">×</a> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div>

2019-03-27 17:11:57

根据您想要做的事情，让焦点保持变化可能是一种选择?

<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，我假设你在寻找按钮功能。

2022-11-16 11:45:39

你能得到的最接近的是:active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

但是，这只会在按住鼠标按钮时应用样式。应用样式并保持它在click上应用的唯一方法是使用一点JavaScript。

2012-11-29 16:29:28

首先我将使用焦点

这样做的原因是它很适合我所展示的例子。如果有人想要鼠标按下类型事件，那么使用active。

HTML代码:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

CSS代码

/* Change *button size, border, bg color, and align to middle* */
    .mdT {
        width: 96px;
        height: 96px;
        border: 0px;
        outline: 0;
        vertical-align: middle;
        background-color: #AAAAAA;
    }
    .mdT:focus {
        width: 256px;
        height: 256px;
    }

/* Change Images Depending On Focus */
    .mdI1       { background-image: url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       { background-image: url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       { background-image: url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       { background-image: url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus { background-image: url('http://placehold.it/256x256/555555&text=Image+4');   }

jsfiddle.net/00wwkjux/

OP只希望在单击事件期间效果持续。虽然这并不完全满足这种需求，但已经很接近了。active会在鼠标放下时进行动画，任何需要持续更长时间的更改都需要使用JavaScript来完成。

2015-02-27 07:27:54