CSS-only方式改变底层元素属性?

时间:2015-02-01 20:11:30

标签: css wordpress

是否有一种被动方法" (仅限CSS)在页面上的元素上检测到" hover" -event时更改正文的背景?

这样的东西

body div:悬停会触发身体的背景图像

我希望这样做,因为我不知道编码,但运行wordpress-site ...

2 个答案:

答案 0 :(得分:1)

对不起大卫在CSS中,你只能向下一个级联方向处理。你需要编写这个脚本。

答案 1 :(得分:1)

没有CSS父选择器,但您可以通过使用具有负div的固定位置z-index来实现您的目标,这是一个悬停元素的兄弟:

.fixed {
  position: fixed;
  z-index: -1;
}

button:hover ~ .fixed {
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: yellow;
}
<button>Hover over me</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<button>Hover over me</button>
<div class="fixed"></div>

Fiddle