悬停时标题文本颜色更改答案

【问题标题】：Header Text Color Change on Hover悬停时标题文本颜色更改
【发布时间】：2021-09-09 18:56:37
【问题描述】：

页眉部分在页面顶部是透明的，但当您将鼠标悬停在该部分上时，它会变为白色。但是当我将鼠标悬停在标题部分时，我找不到将标题文本变为黑色的方法。

我可以轻松地将菜单链接/项目设置为黑色，但我看不到如何更改整个标题文本

但话又说回来，里面的一切都变黑了。不仅仅是标题文本。徽标，社交图标等。我真的很难弄清楚。

请问，有人可以提供帮助吗？

这是我想要实现的示例：https://firstsight.design/cherie/hair/

【问题讨论】：

标签： css text colors header hover

【解决方案1】：

只需将鼠标悬停在您想要更改的任何内容上添加一个类，然后在 CSS 中输入：your-class:hover { // the style}

在 id/class 名称之后使用 :hover 可以实现，因此当您将鼠标悬停在某个元素上时，它将更改为该样式

*注意：对多个项目使用一个类，对单个项目使用一个 id

【讨论】：

【解决方案2】：

他们似乎只是在标题上使用filter: invert(1);。

在这里，我为您制作了这个示例，它与您的链接网站完全一样。

body{
  background-image: url("https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915-1.jpg");
  background-size: cover;
}
.header {
  display: flex;
  justify-content: space-between;
  background-color:transparent;
  padding: 20px;
  transition: 0.5s;
}

img{
  max-height: 100px;
}

.whiteblack{
  color: white;
}


.header:hover {
  background-color: black;
   filter: invert(1);
}

<div class="header">
<img class="whiteblack" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.iconsdb.com%2Ficons%2Fpreview%2Fwhite%2Fspeech-bubble-4-xxl.png&f=1&nofb=1">
  <div class="whiteblack">link 1</div>
  <div class="whiteblack">link 2</div>
  <div class="whiteblack">link 3</div>
  <div class="whiteblack">link 4</div>
  <div class="whiteblack">link 5</div>
</div>

【讨论】：

【解决方案3】：

更改标题部分的文本和背景颜色：

body {
background-image: url("https://mcdn.wallpapersafari.com/medium/16/87/DVEF0r.jpg");
}

#header {
padding: 10px;
text-align: center;
color: #fff;
transition: color 0.7s, background-color 0.7s
}

#header:hover {
background-color: #fff;
color: #000
}

<body>

<div id="header">
The Header Text. Please hover over me.
</div>

</body>

【讨论】：