Javascript 不使用JS更改背景颜色_Javascript_Jquery_Css

Javascript 不使用JS更改背景颜色

javascript jquery css

Javascript 不使用JS更改背景颜色,javascript,jquery,css,Javascript,Jquery,Css,我是css和js的初学者。但是我有一个基本的问题，我在谷歌上找不到答案：我能在不使用javascript和jquery的情况下用css在div上更改背景颜色吗？是的，这可以通过：target选择器和ID实现 HTML: 演示：或者更酷：：目标需要IE9+是的，您可以。您可以尝试以下方法： HTML代码 <div class="eventwheniclick">Hola amigo</div> 这里有一个活生生的例子无论如何，这里有一些东西可以帮助你：（On

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

是的，这可以通过

：target

选择器和ID实现

HTML:

演示：

或者更酷：

：目标

需要IE9+

是的，您可以。您可以尝试以下方法：

HTML代码

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

这里有一个活生生的例子

无论如何，这里有一些东西可以帮助你：（Onmouseover）


.1分部{
宽度：500px；
高度：300px；
背景：红色；
}
.div1:悬停{
背景：蓝色；
}

嗯，是的，但不是在所有浏览器中，所以这里有个窍门

HTML文件

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

那么这里会发生什么？当您单击div时，背景将在

0s

中更改，但是需要

9999s

将其变回红色，这是很长的时间，您仍然可以增加它

这不是真正要做的事情，你需要JavaScript，但这只是一个技巧，以防你真的非常讨厌JavaScript

悬停是，单击否。css没有“单击”的概念：）您可以使用

：focus

选择器，但我认为这不是您想要的效果：您希望在单击div本身或单击链接后更改div颜色吗？单击链接后

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

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

}

<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>

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

#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;
}