html - CSS 悬停（标题和文本）

Question

是否可以使用 CSS hover，当我将鼠标悬停在标题背景上时，标题中的h1和p标签会褪色和模糊，如果是这样，我该怎么做？

如何告诉我的标题模糊文本？

到目前为止我的 CSS：

标题：

.header:hover {
  background-image: url('img/bg.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #000000;
  color: #f6f6f6;
  -moz-box-shadow: 0px 2px 9px #888;
  -webkit-box-shadow: 0px 2px 9px #888;
  box-shadow: 0px 2px 9px #888;
  max-height: 420px;
  -webkit-transition: all 3.2s ease;
  -moz-transition: all 3.2s ease;
  -o-transition: all 3.2s ease;
  -ms-transition: all 3.2s ease;
  transition: all 3.2s ease;
  -webkit-filter: grayscale(0.5) blur(10px);
}
p {
  font-size: 16px;
  line-height: 24px;
}
h1 {
  font-weight: 200;
  font-size: 42px;
}

Answer 1

您可以将:hover选择器应用于链中较早的元素，例如：

.header:hover p {
    /* blur filters, etc. */
    -webkit-filter: grayscale(0.5) blur(10px);
}

这将在div 悬停.header时将指定的属性应用于 div内的段落。.header您应该能够为h1