63

我想创建一个button在按下时改变其样式的。这是我的 CSS 代码：

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
<button>Button</button>

只有当我单击并按住它时它才会更改。我想让它在按下后改变样式。例如，正常状态为白色，被点击的状态为绿色，点击后为红色。

4

5 回答 5

75

如果您使用<a>标签而不是按钮，则可以执行此操作。我知道这并不完全符合您的要求，但如果您找不到解决方案，它可能会给您一些其他选择：

从这里的另一个答案的演示中借用我制作了这个：

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a:active {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

a:target {
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
<a id="btn" href="#btn">Demo</a>

注意使用:target; 这将是通过哈希定位元素时应用的样式。这也意味着您的 HTML 必须是这样的：<a id="btn" href="#btn">Demo</a>以自身为目标的链接。和演示http://jsfiddle.net/rlemon/Awdq5/4/

感谢@BenjaminGruenbaum，这里有一个更好的演示：http: //jsfiddle.net/agzVt/

另外，作为脚注：这应该使用 JavaScript 并从元素中应用/删除 CSS 类来完成。这将不那么令人费解。

于 2013-03-17T17:43:56.923 回答
22

:focus只要用户不点击其他地方，您就可以使用which 将保持样式。

button:active {
    border: 2px solid green;
}

button:focus {
    border: 2px solid red;
}
于 2013-03-17T17:32:22.413 回答
7

我们应该包含一点 JS 吗？因为 CSS 基本上不是为这项工作而创建的。CSS 只是为 HTML 添加样式的样式表，但它的伪类可以做一些基本 CSS 做不到的事情。例如button:activeactive 是伪的。

参考：

http://css-tricks.com/pseudo-class-selectors/你可以在这里了解更多关于伪的信息！

你的代码：

您拥有的基本但有用的代码。并且:active只有在触发点击事件后才会发生。

button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}

button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}

这就是 CSS 会做的，rlemon 建议的很好，但正如他所建议的那样，这将需要a标记。

如何使用 CSS：

你也可以用:focus。 :focus一旦点击就可以工作，并且会一直保持到你点击其他地方，这是 CSS，你试图使用 CSS，所以:focus用来改变按钮。

JS 会做什么：

JavaScript 的 jQuery 库将帮助我们编写这段代码。这是示例：

$('button').click(function () {
  $(this).css('border', '1px solid red');
}

这将确保即使点击退出，按钮也会保持红色。要更改焦点类型（将红色更改为其他颜色），您可以使用以下命令：

$('button').click(function () {
  $(this).css('border', '1px solid red');
  // find any other button with a specific id, and change it back to white like
  $('button#red').css('border', '1px solid white');
}

这样，您将创建一个导航菜单。当您单击它们时，它将自动更改选项卡的颜色。:)

希望你能得到答案。祝你好运！干杯。

于 2013-09-24T15:52:04.427 回答
1

如果按钮打开一个新页面，您可以使用 php 执行此操作。

例如，如果按钮链接到名为 pagename.php 的页面，网址为：www.website.com/pagename.php，只要您停留在该页面上，该按钮就会保持红色。

我用'/'分解了网址，得到了类似的东西：

url[0] = pagename.php

<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?>


<html>
<head>
  <style>
    .btn{
     background:white;
     }
    .btn:hover,
    .btn-on{
     background:red;
     }
  </style>
</head>
<body>
   <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a>
</body>
</html>

注意：我没有尝试此代码。它可能需要调整。

于 2013-07-19T00:46:36.900 回答
0

也许:active结束:focus会有:hover帮助！尝试

button {
background:lime;
}

button:hover {
background:green;
}

button:focus {
background:gray;
}

button:active {
background:red;
}

然后：

<button onkeydown="alerted_of_key_pressed()" id="button" title="Test button" href="#button">Demo</button>

然后：

<!--JAVASCRIPT-->
<script>
function alerted_of_key_pressed() { alert("You pressed a key when hovering over this button.") }
</script>

对不起最后一个。:) 我只是向您展示了一个很酷的功能！
等等……我只是强调了一个代码块吗？这太酷了！！！
于 2019-09-06T04:24:37.080 回答