Home>

This is the first post.
Copy coding is done with HTML/CSS,
I want to make a button that changes color when the mouse cursor is placed on it.
However, only the background color changes, and the text color does not change.
What should i do?

Current image

The image I want to achieve

Corresponding source code
.nav {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 70px;
  width: 919px;
  border: solid 1px # 07df8c;
  background-image: linear-gradient (rgb (156,227,225) 0%, rgb (108,198,196) 100%);
  border-radius: 6px;
}

.nav ul li a {
  text-decoration: none;
  padding: 17px 0px 18px;
  width: 182px;
  display: block;
  text-shadow: 1px 1px 2px # 6CC6C4;
}
.nav ul {
  list-style: none;
  width: 919px;
  height: 70px;
  padding: 0;
  margin: 0;
}
.nav li {
  margin: 0;
  padding: 0;
  height: 70px;
  width: 20%;
  border-right: solid 1px # 6CC6C4;
  border-left: # 99E1DF solid 1px;
}
.nav ul li a .textA {
  color: #FFFFFF;
  height: 20px;
  line-height: 20px;
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
.nav ul li a .textB {
  color: #FFFFFF;
  line-height: 15px;
  display: block;
  text-align: center;
  font-size: 50%;
  font-weight: bold;
}

.nav li: hover {
  background-image: linear-gradient (# 71C9C7, # 99E1DF);
}
What I tried

I tried adding a pseudo-class hover to a character, but it doesn't work.

  • Answer # 1

    .nav ul li a: hover .textA,
    .nav ul li a: hover .textB {
      color: # 000/* ← Character color you want to change * /
    }

    Because there is no html source.textA.textBI don't know what
    You can probably change the font color with this.
    .textAWhen.textBIf you want to have a different color, please separate the description.