但你可以做什么

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无法正常工作。

您可以在此处详细了解此限制：Is there a CSS parent selector?

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

在此处详细了解：MDN上的General sibling selectors。

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

关于为什么在CSS中没有父选择器的一些有趣读物，请访问：CSS-Tricks上的Parent Selectors in CSS。

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

Answer 2

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

但你可以做什么

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

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

几乎就在那里，试试这个。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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;
  
}

＆＃13;

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

＆＃13;

Answer 4

有点变通方法，但你可以试试这个

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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 个答案:

但你可以做什么