Question

我是css和js的初学者。但我有一个基本的问题，我无法在谷歌找到答案：我可以在点击div上更改背景颜色而不使用javascript和jquery，只需用css吗？

Answer 1

可以使用:target选择器和ID。

https://developer.mozilla.org/en-US/docs/Using_the_:target_selector

HTML：

<div id="demo">Demo</div>
<a href="#demo">Click me</a>

CSS：

:target {
    background: green;
}

演示： http://jsfiddle.net/Qptjq/2/

甚至更酷： http://jsfiddle.net/Qptjq/3/

:target需要IE9 + http://caniuse.com/#search=%3Atarget

Answer 2

是的，你可以。你可以试试这个：

HTML CODE

<div class="eventwheniclick">Hola amigo</div>

CSS代码

.eventwheniclick{
    color:#4f4; 
    background:#0f0f0f;
}
.eventwheniclick:active,.eventwheniclick:focus{
    color:#f4f;
    background:#f0f0f0;

}

和这里的实例 http://jsbin.com/axawet/1/edit

Answer 3

无论如何，这可能有所帮助：（Onmouseover）

<html>
<head>
<style type="text/css">
.div1 {
    width:500px;
    height:300px;
    background:red;
}
.div1:hover {
    background:blue;
}
</style>
</head>

<body>
<div class="div1"></div>
</body>
</html>

Answer 4

嗯，是的，但不是在所有浏览器中，所以这就是诀窍。

HTML

<div id="myDiv">
</div>

CSS

#myDiv
{
    background-color:red;
    width:100px;
    height:100px;
    -webkit-transition: background 0s;
    -webkit-transition-delay: 99999s;
        -moz-transition: background 0s;
        -moz-transition-delay: 99999s;
            -o-transition: background 0s;
            -o-transition-delay: 99999s;
                transition: background 0s;
                transition-delay: 99999s;
}
#myDiv:active
{
    background-color:blue;
    -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
            -o-transition-delay: 0s;
                transition-delay: 0s;
}

那么这里会发生什么？当你点击div时，背景会在0s中发生变化，但是需要99999s才能变回红色，而且很多时候你可能会增加它。

这不是真正需要的东西，你需要JavaScript，但它只是一个技巧，如果你真的，真的讨厌JavaScript。

DEMO

没有JS改变背景颜色

4 个答案: