Question

我尝试仅使用 CSS 点击后为div提供背景颜色。我尝试过给予

：访问，：焦点，似乎没有什么工作。在点击之后，我有什么方法可以为 div 提供背景颜色。点击使用 CSS ？我没有采取悬停效果。

Answer 1

如果您不了解javacsript，这是一个快速解决方案。

＆＃13;

<div style="background-color: blue;" onclick="this.style.background='red'">
<p>Click me to change from color BLUE to RED</p>
</div>

＆＃13;

Answer 2

使用臭名昭着的checkbox hack

，只有一个CSS解决方案

＆＃13;

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

div {
  position: relative;
}

label {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

input[type=checkbox]:checked ~ div {
  background: magenta;
}

＆＃13;

<input type="checkbox" id="checkMeOut">
<div>
  <label for="checkMeOut">test</label>
  i will change background-color
</div>

＆＃13;

第一。设置html（复选框输入，你要改变的div，div里面添加标签链接到你的复选框）

秒。在css中隐藏任何你想要的复选框。

将标签置于绝对位置，使其高度和宽度等于div的尺寸，以便当您点击div上的任意位置时，单击标签，然后激活复选框，使其显示为:checked状态< / p>

然后使用通用兄弟连接器~为div提供任何你想要的风格

让我知道它是否适合你

Answer 3

这可以使用:target伪类：

在CSS中完成

[id="foo"] {
   width: 5em;
   height: 5em;
   background-color: red;
   transition: 150ms;
}

[id="foo"]:target {
  background-color: green;
}

<a href="#foo">
  <div id="foo"></div>
</a>

Answer 4

这很简单。
1-给div一个id或一个班级 <div id="mydiv">bla bla bla</div>
2-使用此id或类来定位JS文件/脚本中div事件的click。
3-做你想做的事情：）

$('#mydiv').on('click', function () {
  $(this).css('background-color', 'blue');
});

希望这有帮助，SYA：）

鼠标单击后div的背景颜色

4 个答案: