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

＆＃13;

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

＆＃13;

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

＆＃13;

[编辑]好的，现在是纯CSS

Answer 2

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

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

但在外面点击它仍然是相同的。因为您必须添加新类或必须实现将内联样式应用于DOM元素的现有代码。

Answer 3

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

<强> CSS

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

.colorButton:focus{
    background: yellow;
}

<强> HTML

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

小提琴here

<强> FYI

focus

Answer 4

由于HTML和CSS中没有单击事件，您可以使用伪类的功能：选中以更改某些内容。只需将标签设置为某个按钮，而不是在jquery中绑定一些点击功能。

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

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

Answer 5

我认为你只能用CSS做到这一点，因为没有像点击＆＃34;点击＆＃34;属性。

也许：活跃或：悬停将满足您的需求。

.colorButton1:active
{
    background: green;
}

.colorButton2:hover
{
    background: blue;
}

http://jsfiddle.net/qbjsnp42/

Answer 6

你可以做的最接近的事情是：使用：active或：focus但是第一个只能在你按下按钮时才能工作，而第二个只能在你按下其他任何地方时才能工作

你可以做的是在你的CSS中定义一个类，然后通过JS在点击

上添加类

Answer 7

使用复选框/收音机CSS黑客，这可能是一个解决方案：{请不要，处理点击应该在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点击功能改变按钮的背景颜色

7 个答案:

-jsFiddle-