Question

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

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

这是我尝试的代码

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>

Answer 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>

Answer 2

悬停时将color更改为#fff

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

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

h1:hover {
  color: #fff;
}

h1::before,
h1::after {
  content: "";
  width: 100%; /* To show the lines by default */
  position: absolute;
  height: 2px;
  background: white;
  transition: width .3s ease;
}

/*h1:hover::before,
h1:hover::after {
  width: 100%;
}*/ /* Not needed */

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

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

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


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


  </div>
</body>

Answer 3

您所做的一切都很完美，除了，您只需要进行更改

此

h1:hover {
   color: #6849e3;
 }

至

h1:hover {
   color: white;
 }

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

3 个答案: