按下<按钮>选择器

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>

仅当我点击并按住它时才会更改.我想在按下之后改变它的样式.例如,正常状态为白色,点击状态为绿色,点击释放后为红色.

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:activeactive是伪的.

参考:

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

你的代码:

您拥有基本但有用的代码.:active只有触发click事件后才会出现yes .

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

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

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