没有JS改变背景颜色

Question

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

Answer 1

是的，可以使用:target selector和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代码

<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 个解决方案

解决方案1
2 已采纳 2013-03-14 15:55:43

解决方案2
0 2013-03-14 16:00:28

解决方案3
0 2013-03-14 16:00:45

解决方案4
0 2013-03-14 16:03:10

没有JS改变背景颜色

问题描述

4 个解决方案

解决方案1 2 已采纳 2013-03-14 15:55:43

解决方案2 0 2013-03-14 16:00:28

解决方案3 0 2013-03-14 16:00:45

解决方案4 0 2013-03-14 16:03:10

解决方案1
2 已采纳 2013-03-14 15:55:43

解决方案2
0 2013-03-14 16:00:28

解决方案3
0 2013-03-14 16:00:45

解决方案4
0 2013-03-14 16:03:10