CSS选择器不起作用（〜）

Question

我正在学习CSS，并试图找到一种方法，当你将鼠标悬停在页面上的标题元素上时，身体的背景颜色会发生变化。 我试过使用每个选择器，它只是不起作用！ 任何人都可以帮我解决我的问题吗？ 这是我的代码：

<html>

 <style>


  #header {
   text-align: center;
   position: relative;
  }

  #header:hover ~ .body{
   background-color: blue;
  }

  .body{
   background-color: purple;
  }


 </style>

 <body class="body">

  <div id="header">
   <font size="16">My Header</font>
  </div>

 </body>

</html>

Answer 1

在您拥有的代码中，您实际上要做的是选择一个父元素。

换句话说， body是div#header的父级，你试图在其子级悬停时选择body 。

在CSS中，无法选择元素的父级。 CSS不会那样工作。

您可以在此处阅读有关此限制的更多信息：是否有CSS父选择器？

您尝试使用的选择器（〜）称为通用兄弟选择器 ，它匹配共享同一父节点的元素。

在这里阅读更多相关信息：MDN上的常规兄弟选择器。

如果您真的想要选择父元素，可以查看Javascript / jQuery解决方案。

有关CSS中为什么没有父选择器的一些有趣读物，请访问CSS-Tricks 中的CSS中的父选择器。

有关CSS选择器的完整列表，请访问： W3C选择器级别3 。

Answer 2

您无法使用CSS 定位父元素 （快速Goog搜索会告诉您）

但你能做什么

在#header之后放置一个全尺寸透明元素 。
在header hover目标该元素使用+ （立即下一个兄弟选择器）和
将元素背景从透明更改为蓝色：

 body{ background-color: purple; } #header { text-align: center; position: relative; } #underlay{ position: fixed; top:0; left:0; bottom:0; right:0; z-index: -1; /* make it underlay other elements!! */ background: transparent; } #header:hover + #underlay{ background: blue; }

 <div id="header"> <h1>My Header</h1> </div> <div id="underlay"></div>

Answer 3

试试这个。

 body{ background-color: purple; margin:0; padding:0; } #header { text-align: center; padding:5px; position: relative; cursor:pointer; } #header:hover { background-color: blue; } #header a{ font-size:26px; }

 <body> <div id="header"> <a>My Header</a> </div> </body>

更新：您可以通过伪元素实现：

 body { background: purple;} .bg { position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; } a{ font-size:40px; text-align:center; } .menu div:first-child:hover ~ .bg { background: blue; }

 <div class="menu"> <div><a>My Header</a></div> <div class="bg"></div> </div>

Answer 4

一点办法，但你可以试试这个

 #bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; background:#fff; } #header { height: 100px; position:fixed; top: 0px; width:100%; background: red; z-index: 2; } #header:hover ~ #bg { background: yellow; }

 <div id="header"></div> <div id="bg"> </div>

Answer 5

演示我认为你在寻找什么

 /* Initial Styling of CSS style, note that there is a DOM element "header" so you don't have to use a div with an ID of "header" */ header { background-color: black; color: white; padding: 1px 0; cursor: pointer; text-align: center; } /* This is where you back the changable element. */ .background { background-color: red; display: fixed; width: 100%; /* You can make a Javascript code to see what the length of the webpage is but for now let's just say the page is 500 px long.*/ height: 500px; transition: .3s; /* This is so that it can't be selected and will act exactly like a background */ z-index: -1; } /* This is where the magic starts. The body is not able to be selected as it is the parent of the element that you want to hover over. However you can select the element NEXT to or as a CHILD of the trigger element. */ header:hover + .background { background-color: yellow; }

 <header> <h1>Hover Here</h1> <h2>Background will change from red to yellow and then back again</h2> </header> <!--Make sure to put the div after ALL elements so that it doesn't cover them up--> <div class="background"></div>

CSS选择器不起作用（〜）

问题描述

5 个解决方案

解决方案1
4 2015-09-17 00:37:04

解决方案2
3 已采纳 2015-09-17 00:47:55

但你能做什么

解决方案3
-1 2015-09-17 00:12:52

解决方案4
-1 2015-09-17 00:24:17

解决方案5
-1 2015-09-17 00:46:20

CSS选择器不起作用（〜）

问题描述

5 个解决方案

解决方案1 4 2015-09-17 00:37:04

解决方案2 3 已采纳 2015-09-17 00:47:55

但你能做什么

解决方案3 -1 2015-09-17 00:12:52

解决方案4 -1 2015-09-17 00:24:17

解决方案5 -1 2015-09-17 00:46:20

解决方案1
4 2015-09-17 00:37:04

解决方案2
3 已采纳 2015-09-17 00:47:55

解决方案3
-1 2015-09-17 00:12:52

解决方案4
-1 2015-09-17 00:24:17

解决方案5
-1 2015-09-17 00:46:20