Question

我有一个想要在点击时更改的图像元素。

<img id="btnLeft">

这有效：

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

但我需要的是：

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

但是，它显然不起作用。是否有可能在CSS中有onclick行为（即不使用JavaScript）？

Answer 1

您最接近的是:active：

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

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

Answer 2

您可以使用伪类:target来模仿点击事件，让我举个例子。

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

以下是它的样子：http://jsfiddle.net/TYhnb/

有一点需要注意，这仅限于超链接，因此如果您需要使用非超链接（例如按钮），您可能需要稍微破解它，例如将超链接样式化为类似于按钮。

Answer 3

如果给元素tabindex，则可以使用:focus伪类来模拟点击。

<强> HTML

<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />

<强> CSS

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

http://jsfiddle.net/NaTj5/

Answer 4

编辑：在OP澄清他想要的之前回答。以下是类似于javascripts onclick的onclick，而不是:active伪类。

这只能通过Javascript或Checkbox Hack

来实现

复选框hack基本上让你点击一个标签，“勾选”一个复选框，允许你按照自己的意愿设置标签样式。

demo

Answer 5

TylerH做了一个非常好的答案，我只需要给最后一个按钮版本一个更新。

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 30px;
    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:30px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    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>

Answer 6

好吧，这可能是一个老帖子......但是谷歌的第一个结果却决定将自己的混音作为...

我将首先使用焦点

这样做的原因是它适用于我正在展示的示例，如果有人想要鼠标按下类型事件，那么使用活动

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');   }

JS FIDDLE LINK： http://jsfiddle.net/00wwkjux/

那么为什么我要在一个旧帖子中发布这个，好吧因为这里的例子各不相同，我想提供一个回到社区，这是一个工作的例子。

正如线程创建者已经回答的那样，他们只希望效果在点击事件期间持续。现在虽然这不是那种需要，但它已经接近了。当鼠标停止时，激活将生成动画，并且您需要持续更长时间的任何更改都需要使用javascript完成。

Answer 7

纯粹的CSS解决方案怎么样而不是hacky？

＆＃13;

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

＆＃13;

<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

＆＃13;

@TylerH有很好的回应，但它是一个非常复杂的解决方案。我有一个解决方案，那些只想要一个简单的＆＃34; onclick＆＃34;纯粹的css效果，没有一堆额外的元素。

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

诀窍是改变转换的延迟，以便在用户点击时它会持续。

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

在这里我添加＆＃34;点击＆＃34;类以及如果需要，javascript也可以提供效果。我使用0px阴影滤镜，因为它会以这种方式突出显示给定的透明图形蓝色。

我在这里有一个0的过滤器，所以它不会生效。当效果被释放后，我可以延迟添加转换，这样它就可以提供一个很好的＆＃34;点击＆＃34;影响。

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

这允许我进行设置，以便当用户点击按钮时，它会突出显示蓝色，然后慢慢淡出（当然，您也可以使用其他效果）。

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

Answer 8

然而，

Bojangles答案通常是正确的：

“应用样式并将其应用于onclick的唯一方法是使用一点JavaScript”

在点击后保持块可见的意义上，这并不完全正确。我有一个类似的情况，我需要一个带有onClick的popup div，我无法添加任何JS或更改标记/ HTML（一个真正的CSS解决方案），这可能有一些警告。除非你可以更改HTML（添加'id'），否则你不能使用可以创建漂亮弹出窗口的：target技巧。

在我的情况下，popup 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;
}

示例（以及允许点击弹出窗口使其消失的示例）：

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

Answer 9

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

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

Answer 10

我遇到一个问题，该元素在悬停时必须变为红色，而在单击时必须变为蓝色。要使用CSS实现此目的，您需要例如：

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

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

我努力了一段时间，直到发现CSS选择器的 order 是我遇到的问题。问题是我切换了位置并且活动的选择器不起作用。然后我发现先:hover，然后再:active。

Answer 11

您可以使用：target

针对一般目标

：目标

或按类名过滤

.classname：target

或按ID名称过滤

#idname：target

<style>

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

</style>


<a href="#id01">Open</a>

<div id="id01" class="msg">    
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>

我可以在CSS中使用onclick效果吗？

11 个答案: