Question

我想创建一个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>

仅在我点击＆amp;坚持下去。我想在按下之后改变它的样式。例如，正常状态为白色，点击状态为绿色，点击释放后为红色。

Answer 1

如果您使用<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类。它会更加复杂。}

Answer 2

只要用户没有在其他地方点击，您就可以使用:focus样式。

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

button:focus {
    border: 2px solid red;
}

Answer 3

我们应该加一点JS吗？因为CSS基本上不是为这份工作而创建的。 CSS只是一个样式表，用于向HTML添加样式，但它的伪类可以执行基本CSS无法执行的操作。例如button:active active是伪的。

<强>参考：

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

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

希望你能得到答案。祝好运！欢呼声。

Answer 4

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

例如，如果按钮链接到名为pagename.php的页面为url：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>

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

Answer 5

在PUT craft-entries_1 { "mappings": { "elasticsearch-record": { "properties": { "result": { "type": "nested" } } } } }和: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>

 Sorry about that last one. :) I was just showing you a cool function! 
Wait... did I just emphasize a code block? This is cool!!!

按下<按钮>选择器</按钮>

5 个答案: