如果用户在css和html中悬停在身体​​上，你如何改变h1标签的颜色？

Question

我正在尝试这个（下面的代码），但它不起作用，我不知道为什么。你能不能嵌入css？

 html {
        transition: background;
        transition-duration: 1s;
        transition-timing-function: linear;
    }

    html:hover {
        background : #ffb7b7;
        h1 {
          color : blue;
        }       
    }

我想要它，以便当用户将鼠标悬停在html页面上时，它应该将h1标签的颜色更改为蓝色。关于如何实现这一目标的任何想法？

Answer 1

在CSS中，您无法嵌入后代规则，这需要LESS或其他CSS preprocessor。

相反，请使用descendant combinator，它只是一个空格（）：

html {
  transition: background;
  transition-duration: 1s;
  transition-timing-function: linear;
}

html:hover {
  background: #ffb7b7;
}

html:hover h1 {
  color: blue;
}

<h1>Hover over me!</h1>

Answer 2

将您的代码更改为此读取:hover doc

 html {
        transition: background;
        transition-duration: 1s;
        transition-timing-function: linear;
    }

    html:hover h1{
        background : #ffb7b7;
        color : blue;  
    }

Answer 3

在CSS中：

h1:hover{
color: blue;}