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

//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。

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来完成。

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

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

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

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

使用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元素。如果您实际上不需要按钮，任何旧元素都可以，那么您可以删除这个演示中的几乎所有样式，与上面的第二个演示类似。

使用一个纯粹的CSS解决方案，而不是(那么)俗气。

.page { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-color: #121519; color: whitesmoke; } .controls { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .arrow { cursor: pointer; transition: filter 0.3s ease 0.3s; } .arrow:active { filter: drop-shadow(0 0 0 steelblue); transition: filter 0s; } <body class="page"> <div class="controls"> <div class="arrow"> <img src="https://i.imgur.com/JGUoNfS.png" /> </div> </div> </body>

TylerH的反应很好，但它是一个相当复杂的解决方案。我有一个解决方案，你只是想要一个简单的“onclick”效果与纯CSS没有一堆额外的元素。

我们将简单地使用CSS过渡。你也可以用动画来做类似的事情。

诀窍是更改转换的延迟，以便在用户单击时它将持续。

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

这里我也添加了“clicked”类，这样JavaScript也可以在需要时提供效果。我使用了一个零像素的投影过滤器，因为在我的例子中，它会以这种方式突出显示给定的透明图形蓝色。

我在这里有一个0的过滤器，所以它不会生效。当效果释放时，我可以添加一个延迟的过渡，这样它就会提供一个很好的“点击”效果。

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

这允许我设置当用户单击按钮时，它突出显示蓝色，然后慢慢淡出(当然，您也可以使用其他效果)。

虽然您在这里受到限制，因为要突出显示的动画是即时的，但它仍然提供了所需的效果。你可以在动画中使用这个技巧来产生更平滑的整体过渡。