3

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

4

4 回答 4

2

是的，: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

于 2013-03-14T15:55:43.167 回答
0

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

代码

<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

于 2013-03-14T16:00:28.967 回答
0

无论如何，这里有一些帮助：（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>
于 2013-03-14T16:00:45.110 回答
0

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

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。

演示

于 2013-03-14T16:03:10.733 回答