使用CSS模拟实际单击事件的最佳方法(实际上是唯一的方法*)是使用复选框hack(在没有mouseUp的地方，而不是仅仅停留在元素上或使元素激活)。它通过标签的for=""属性将标签附加到<input type="checkbox">元素。

该特性得到了广泛的浏览器支持(checked伪类是IE9+)。

将相同的值应用到<input>的ID属性和附带的<label>的for=""属性上，您可以告诉浏览器在点击:checked伪类时重新设置标签的样式，这要归功于单击标签将选中和取消选中"associated" <input type="checkbox">。

*你可以通过IE7+中的:active或:focus伪类来模拟一个“选定的”事件(例如，对于一个通常为50px宽的按钮，你可以在激活时改变它的宽度:#btnControl:active {width: 75px;})，但这些都不是真正的“点击”事件。它们在元素被选中的整个过程中都是“活动的”(例如通过键盘的tab)，这与真正的单击事件略有不同，后者通常在mouseUp上触发一个操作。

复选框黑客的基本演示(你所要求的基本代码结构):

标签{ 显示:块; 背景:lightgrey; 宽度:100 px; 身高:100 px; ｝ #demo:checked + label { 背景:蓝色; 颜色:白色; ｝ <input type="checkbox" id="demo"/> <label for="demo">我是个古板。点击我。< / >标签

在这里，我将标签定位在标记中的输入之后。这样我就可以使用相邻的兄弟选择器(+键)只选择紧跟在#demo复选框后面的标签。由于:checked伪类应用于复选框，#demo:checked +标签只在复选框被选中时应用。

演示如何在点击时调整图像大小，这就是你要问的:

# btnControl { 显示:没有; ｝ #btnControl:checked + label > img { 宽度:70 px; 身高:74 px; ｝ <input type="checkbox" id="btnControl"/> <label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

话虽如此，也有一些坏消息。因为一个标签一次只能与一个表单控件相关联，这意味着您不能只是在<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只是用于样式化label元素。如果您实际上不需要按钮，任何旧元素都可以，那么您可以删除这个演示中的几乎所有样式，与上面的第二个演示类似。

如果你给元素一个标签索引，那么你可以使用:focus伪类来模拟点击。

# btnLeft:{焦点 宽度:70 px; 身高:74 px; ｝ <img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>

我有以下代码的鼠标悬停和鼠标点击，它的工作:

//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;
}

我有一个问题的元素，必须是红色的悬停和蓝色的点击，而悬停。要用CSS实现这一点，你需要例如:

h1:hover { color: red; }
h1:active { color: blue; }

<h1>This is a heading.</h1>

我挣扎了一段时间，直到我发现CSS选择器的顺序是我所遇到的问题。问题是我换了位置，主动选择器不工作了。然后我发现:hover先去，然后:active。

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

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

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

警告!下面特别简单的回答!：）

实际上，你可以只使用CSS(并且不使用复选框hack)就有一个持久的更改(例如在单击后出现并保持可见的块/弹出窗口)，尽管这里有许多(否则正确的)答案声称，只要你只需要在悬停期间保持持久性。

所以看看Bojangles和TylerH的答案，如果它们对你有用，但如果你想要一个简单的css答案，在点击后保持块可见(甚至可以让块在后续点击后消失)，那么看看这个解决方案。

我也遇到过类似的情况。我需要一个弹出的div与onClick，我不能添加任何JavaScript或改变标记/HTML(一个真正的CSS解决方案)，这是可能的，但有一些警告。你不能使用:target技巧，可以创建一个漂亮的弹出窗口，除非你可以改变HTML(添加一个'id')，所以这是出去了。

在我的例子中，弹出式div包含在其他div中，我希望弹出式div出现在其他div的顶部，这可以使用:active和:hover的组合来完成:

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

示例(以及一个允许点击弹出使它消失):

CSS-Only onClick弹出Div(没有Javascript或HTML更改!)

我还在下面插入了一个代码片段示例，但在Stack Overflow沙箱中的定位是奇怪的，所以我不得不把“点击这里”文本放在innerDiv之后，这通常是不需要的。

/* Outer div - needs to be relative so we can use absolute positioning */ .clickToShowInfo { position: relative; } /* When clicking outer div, make inner div visible */ .clickToShowInfo:active .info { visibility: visible; } /* And hold by staying visible on hover */ .info:hover { visibility: visible; } /* General settings for popup */ .info { position: absolute; top: -10; visibility: hidden; z-index: 100; background-color: white; box-shadow: 5px 5px 2px #aaa; border: 1px solid grey; padding: 8px; width: 220px; height: 200px; } /* If we want clicking on the popup to close, use this */ .info:active { visibility: hidden; /* Doesn't work because DCEvent is :active as well */ height: 0px; width: 0px; left: -1000px; top: -1000px; } <p /> <div class="clickToShowInfo"> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> Click here to show info </div> <p />