我想在 click 上显示绿色的苹果(bg色)而不是红色的芒果(bg色)，我知道这是可能的 hover 或使用 javascript 。是否有任何方法可以使用css对鼠标单击?
#two
{
display:none;
}
#one
{
background-color :red;
} <html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
我认为你不能只使用CSS做你想做的事情，但是你可以使用:active选择器在点击它时改变它。
看到:http://www.w3schools.com/cssref/sel_active.asp
这取决于你对"点击"one_answers"显示"的定义。
如果你的意思是你可以通过点击点击"芒果"div来切换"苹果"div的外观，那么NO…你需要javascript。
但是，如果您只是想在单击鼠标按钮并按住时看到"mango"div，那么伪类:active就是您所需要的…与合适的兄弟选择器结合使用。
#two {
display: none;
background: green;
}
#one {
background-color: red;
}
#one:active + #two {
display: block;
}<div id="one">
<p>mango [click and hold]</p>
</div>
<div id="two">
<p>apple</p>
</div>
注意:这个选择器只在上工作…它不会对p标签影响"apple"div。
最好使用 js 作为点击的目的。
CSS唯一解决方案
下面是一个使用css创建点击功能的简单hack。为此目的。下面是一个使用checkbox和label的简单hack。
label {
display: block;
background: red;
}
label:after{
content: "Mango";
}
#demo:checked + label {
background: Green;
color: white;
}
#demo:checked + label:after{
content: "Apple";
}
.hide{
display:none;
}<input type="checkbox" id="demo" class="hide"/>
<label for="demo"></label>