我能在CSS中使用onclick效果吗？

Question

我能在CSS中使用onclick效果吗？

502

我有一个图片元素，希望在点击时进行更改。

<img id="btnLeft">

这个有效：

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

但是我需要的是：

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

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

- Alegro

20

:active 表示当鼠标按下时起作用。根据您想要做什么，您可能可以使用 CSS4 伪类 :target 来实现相同的效果。 - bfavaretto

4

在选择器4中，:target 并不是一个新的概念。它自选择器3起就已经存在了，并且在写作时已经成为推荐标准已经有一年之久。 - BoltClock

您需要为其他输入方式提供交互，例如触摸、键盘、操纵杆和语音控制。 - Andy

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zahari Kitanov · Answer 1

我遇到了一个问题，需要在鼠标滑过时将元素涂成红色，并在点击时将其变成蓝色，同时仍然保持悬停状态。为了使用CSS实现这个需求，你需要像下面这样做：

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

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

我曾经遇到过一些问题，直到我发现CSS选择器的顺序是我遇到的问题所在。问题在于我交换了位置，导致活动选择器无法正常工作。后来我发现:hover应该放在前面，然后是:active。

- Pir Fahim Shah · Answer 2

我有一段关于鼠标悬停和点击的代码，它能够正常工作：

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

- Mori · Answer 3

如果由于某种原因无法使用JavaScript，以下解决方法是创建切换按钮的最佳选择。<details> HTML元素创建了一个折叠小部件来隐藏和显示内容。我们将（滥用）<details>元素和一些CSS，所以我们称之为“细节黑客”。

工作原理

这��是一个基本示例。

details[open] summary {
  color: red;
}

<details>
  <summary>Toggle</summary>
</details>

点击<summary>元素会切换<details>的open属性和<summary>的样式。您还可以切换<details>的下一个兄弟元素的样式。

details[open] summary {
  color: red;
}

details[open] ~ p {
  color: blue;
}

<details>
  <summary>Toggle</summary>
</details>
<p>Hello, world!</p>

这种方法相对于复选框hack的优势在于按钮可以通过键盘访问。

注意事项：

-

的内容可以是任何标题内容、纯文本或可在段落中使用的HTML。 -

的display默认值为list-item。要删除列表项的三角形::marker，可以将该值更改为inline-flex，例如。

summary {
  display: inline-flex;
}

或者，您可以使用以下规则之一：

summary {
  list-style: none;
}

summary::marker {
  content: none;
}

对于楼主的问题的答案

summary {
  display: inline-flex;
}

details[open] img {
  width: 75px;
  height: 75px;
}

<details>
  <summary><img src="https://istack.dev59.com/5FBwB.webp" alt="Heart"></summary>
</details>

查看更多示例的源代码：使用<details>元素创建CSS切换按钮

- jfxninja · Answer 4

根据你想做什么，让焦点保持变化可能是一个选项？

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

请注意，这不适用于图像标签。但是根据您的元素ID，我假设您正在寻找按钮功能。

- Hatem Badawi · Answer 5

您可以使用:target。

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

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

#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">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>