css-按下<button> s

我想创建一个<button>Button</button>,当按下它时会更改其样式。 这是我的CSS代码:

<button>Button</button>
<button>Button</button>

仅当我单击并按住它时,它才会更改。 我想使其按下后更改样式。 例如,正常状态将为白色,被单击时的状态将为绿色,而释放单击后的状态将为红色。

Kyrbi asked 2019-11-17T17:41:00Z
5个解决方案
71 votes

如果使用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 {
  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;
}
:target

注意使用:target; 这是通过散列指定元素时应用的样式。 这也意味着您的HTML需要这样:<a id="btn" href="#btn">Demo</a>一个以自身为目标的链接。 和演示[http://jsfiddle.net/rlemon/Awdq5/4/]

感谢@BenjaminGruenbaum,这是一个更好的演示:[http://jsfiddle.net/agzVt/]

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

rlemon answered 2019-11-17T17:42:02Z
15 votes

您可以使用:focus,只要用户未在其他位置单击,该样式将保持不变。

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

button:focus {
    border: 2px solid red;
}
Linus Caldwell answered 2019-11-17T17:42:28Z
5 votes

我们应该包括一点JS吗? 因为CSS基本上不是为此工作创建的。 CSS只是用于向HTML添加样式的样式表,但是它的伪类可以完成基本CSS无法完成的工作。 例如:focus active是伪的。

参考:

[http://css-tricks.com/pseudo-class-selectors/]您可以在此处了解有关伪的更多信息!

您的代码:

您拥有的基本但有用的代码。 是的:focus仅在触发点击事件后才会发生。

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建议的很好,但是正如他建议的那样,将需要:focus标签。

如何使用CSS:

您也可以使用:focus。 单击一次:focus即可使用,并且一直保持到您单击其他位置为止,这是CSS,您正在尝试使用CSS,因此请使用:focus更改按钮。

IS会做什么:

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

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

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

Afzaal Ahmad Zeeshan answered 2019-11-17T17:44:08Z
1 votes

如果按钮打开一个新页面,则可以使用php进行操作。

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

我用'/'分解了网址,得到了类似的内容:

网址[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>

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

Vinicius Santana answered 2019-11-17T17:45:00Z
0 votes

也许:focus中的:active: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>
很酷的功能!等等...我只是强调一个代码块吗? 这很酷!!!
Rex answered 2019-11-17T17:45:38Z
translate from https://stackoverflow.com:/questions/15463854/pressed-button-selector