时间戳

首页 > 解决方案 > 单击图像，更改文本的背景

html - 单击图像，更改文本的背景

问题描述

我正在使用此答案中的技巧来制作图像以在单击时调整大小（复选框方法）。它工作正常。但是，当我尝试在图像点击的文本上应用 css 样式时，它不起作用：

<html>
<body>
  <input type="checkbox" id="img-box"/>
  <label for = "img-box">
    <img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
  </label>

  <p id="some-text">
    some text
  </p>
</body>
</html>


#img-box:checked + label > img  {
    width: 100px;

}

#img-box:checked + p  {
    background-color: red;

}

我的错误是什么，我应该如何解决？

jsfiddle：https ://jsfiddle.net/eus18r3h/

标签： htmlcssonclick

解决方案

id 为“img-box”的输入元素不是 p 标签的直接兄弟。#img-box:checked + p 只会设置直接在输入旁边的 ap 标记，中间有一个标签。

这将是您正在寻找的选择器 '#img-box:checked + label + p'

推荐阅读