将鼠标悬停在文本上时难以更改文本颜色答案

【问题标题】：Difficulty in changing color of text when hover over it将鼠标悬停在文本上时难以更改文本颜色
【发布时间】：2019-06-24 22:23:31
【问题描述】：

我试图将鼠标悬停在文本上时将其颜色更改为白色，但我无法这样做。

这是我尝试过的代码。如何确保将鼠标悬停在文本上时文本颜色变为白色，并且将鼠标悬停在文本上时文本大小也会更改？

这是我试过的代码

h1::before,
h1::after {
  content: "";
  width: 0%;
  position: absolute;
  height: 2px;
  background: white;
  transition: width .3s ease;
}

h1:hover::before,
h1:hover::after {
  width: 100%;
}

h1::before {
  top: 0;
  left: 0;
}

h1::after {
  top: 100%;
  right: 0;
 
}

<body>
<div class="text-wrapper">


  <h1 id='text'>
    Days are gone </h1>


</div> 
</body>

【问题讨论】：

没有代码，请贴代码
请检查代码
您的 h1:hover 颜色与未悬停的颜色相同。您需要将其更改为#fff
普通和悬停的颜色相同。
Changing text color on hover using CSS的可能重复

标签： html css

【解决方案1】：

您可以使用:hover.#text:hover{color:red} 执行此操作

body {
  Background: #7a86cb;
  text-align: center;
}

h1 {
  text-align: center;
  color: #6849e3;
  font-family: Merriweather;
  display: inline-block;
  position: relative;
}

h1:hover {
   color: #6849e3;
   
 }

h1::before,
h1::after {
  content: "";
  width: 0%;
  position: absolute;
  height: 2px;
  background: blue;
  transition: width .3s ease;
}

h1:hover::before,
h1:hover::after {
  width: 100%;
}

h1::before {
  top: 0;
  left: 0;
}

h1::after {
  top: 100%;
  right: 0;
 
}
#text:hover{
color:red
}

<body>
<div class="text-wrapper">


  <h1 id='text'>
    INTERNET </h1>


</div> 
</body>

【讨论】：

【解决方案2】：

你已经完美地完成了所有事情，只是你只需要改变

这个

h1:hover {
   color: #6849e3;
 }

到

h1:hover {
   color: white;
 }

【讨论】：