我使用 jquery 单击功能更改按钮的背景颜色

Question

我使用 jQuery click 函数更改按钮的背景颜色，但我想在没有 jQuery 的情况下执行此操作。我如何才能仅将它与 CSS 一起使用？下面是我的代码和 jsfiddle 演示。

.colorButton{
    background: blue;
    color: white;
    cursor: pointer;
}

<div class="buttons">
    <button class="colorButton">Click me</button>
</div>

<script>
    $(document).ready(function () {
        $('.colorButton').click(function (){
            $(this).css("background","yellow");
        });
    });
</script>

http://jsfiddle.net/myyhs84b/

Answer 1

.colorButton{
    background:blue;
    color:white;
    cursor:pointer;
 }
.colorButton:focus{
    background:yellow;
}

<button class="colorButton">Click me</button>

[编辑] 好的，现在纯 CSS

Answer 2

您可以使用 CSS 执行此操作：

.colorButton:active, 
.colorButton:focus{
    background:yellow;
}

但在外面点击它保持不变。因为您必须添加新的 class 或必须实施将内联样式应用于 DOM 元素的现有代码。

Answer 3

CSS 中的 :focus 伪 class 用于设置当前由键盘定位或由鼠标激活的元素的样式。

CSS

.colorButton{
    background:blue;
    color:white;
    cursor:pointer;
}

.colorButton:focus{
    background: yellow;
}

HTML

<div class="buttons">
    <button class="colorButton">Click me</button>
</div>

Fiddle here

仅供参考

focus

Answer 4

由于 HTML 和 CSS 中没有点击事件，您可以使用伪 class :checked 的功能来改变一些东西。只需将标签样式设置为某个按钮，而不是在 jquery.

中绑定一些点击功能

看看这个例子： http://www.paulund.co.uk/create-flat-checkboxes

或:active伪class。这里的例子： http://www.paulund.co.uk/create-a-css-3d-push-button

Answer 5

我不认为你只能用 CSS 来做到这一点，因为没有像 "clicked" 属性.

这样的东西

也许 :active 或 :hover 会满足您的需要。

.colorButton1:active
{
    background: green;
}

.colorButton2:hover
{
    background: blue;
}

http://jsfiddle.net/qbjsnp42/

Answer 6

您可以做的最接近的事情是使用 :active 或 :focus，但第一个只会在您按下按钮时起作用，而第二个只会在您不按其他任何地方时起作用

您可以在 CSS 中定义一个 class，然后通过 JS 在点击

时添加 class

Answer 7

使用 checkbox/radio CSS hack，这可能是一个解决方案：{请不要，处理点击应该在 javascript 中完成}

HTML:

<div class="buttons">
    <input id="rd_btn" type="radio" />
    <button class="colorButton">
        <label for="rd_btn">Click me</label>
    </button>
</div>

CSS:

.colorButton {
    background:blue;
    color:white;
    cursor:pointer;
}
.colorButton {
    padding: 0;
}
.colorButton label {
    display: block;
    padding: 2px;
}
#rd_btn {
    display: none;
}
#rd_btn:checked + button {
    background: yellow;
}

我使用 jquery 单击功能更改按钮的背景颜色

I change background color of button with jquery click function

html

javascript

css

jquery

frontend

-jsFiddle-