3

私はcssとjsの初心者です。しかし、Googleで答えが見つからない基本的な質問があります.cssだけで、JavaScriptとjqueryを使用せずに、クリック時に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/

:targetIE9+が必要http://caniuse.com/#search=%3Atarget

于 2013-03-14T15:55:43.167 に答える
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 に答える
0

はい、できます。あなたはこれを試すことができます：

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

于 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 に答える