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

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

<img id="btnLeft">

如此:

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

但我需要的是:

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

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

当前回答

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

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

2015-06-30 19:18:33

其他回答

你可以使用: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

您可以使用伪类:target来模拟打开单击事件。让我给你们举个例子。

#{东西显示:没有; ｝ {#的东西:目标显示:块; ｝ < a href = " #“>显示< / > < div id = "东西" >宾果!< / div >

这是它的样子:http://jsfiddle.net/TYhnb/

需要注意的一点是，这仅限于超链接，因此如果您需要在其他超链接上使用，例如按钮，您可能需要稍微修改一下，例如将超链接样式化，使其看起来像按钮。

2013-06-23 04:58:29

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

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

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

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

2018-08-06 13:20:17

使用一个纯粹的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;
}

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

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

2017-09-24 20:07:14

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

推荐文章

最新文章

标签