如何将框内的文本悬停在HTML中？

Question

[我为我的英语不好而感到抱歉，如果这个问题看起来很愚蠢，...我的靴子中有这个盒子，当我将鼠标悬停在它上面时，它的颜色变成紫色，盒子里的“ Join”一词变成白色。到目前为止，一切都很好。我的问题是，仅当我将鼠标悬停在特定文本上时，文本Join才是白色的，并且只要我在整个框内，我都希望它保持白色，而不仅是在“ Join”一词上。如您在该图像上看到的，如果我将鼠标移到Join词的右边或左边一点，而当我在盒子里时，Join不再是白色，而是灰色，因为在我将其悬停之前，它曾经是。我知道有一种方法可以解决此问题，但是我找不到解决方法。

这是我的HTML代码：

<li class="centeredjoin"><a class="joinclass" href="#" style="color: #95979D">
  <b> Join </b></a>
 </li>

这是我的CSS：

a :hover { /* Only the word Join becomes white */
    color: white;
}


.centeredjoin:hover { /* The whole background becomes purple */
    color: white;
    background-color: purple;
}

Image num 1Image num 2

Answer 1

将a :hover更改为a:hover。

a:hover {
  /* Only the word Join becomes white */
  color: white;
}

.centeredjoin:hover {
  /* The whole background becomes purple */
  color: white;
  background-color: purple;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<ul>
  <li class="centeredjoin">
    <a class="joinclass" href="#" style="color: #95979D">
      <b> Join </b></a>
  </li>
</ul>

Answer 2

查看CSS中的选择器：

a {
  color: #95979D;
}

.centeredjoin:hover {
  /* The whole background becomes purple */
  color: white;
  background-color: purple;
}

.centeredjoin:hover a {
  color: inherit
}

<li class="centeredjoin">
  <a class="joinclass" href="#">
    <b> Join </b></a>
</li>