将文本格式与鼠标悬停在锚点上的背景图像进行协调

Question

我正在为一个客户端开发一个旧网站，在创建按钮链接时遇到了问题。我曾考虑创建一个包含文本的框，但我无法在图形中生成与html中生成的文本一样清晰的文本。因此，我创建了两个空白框来容纳文本。文本叠加在方框上。相关代码如下。

.style1 {
font-size: 14px;
font-weight: bold;
}
.container {
position: relative;
text-align: center;
color: white;
font-weight: bold;
line-height: 100%;
}
.container:hover {
color: #000000;
}
.centered {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
}
.initials {
font-size: 16px;
}
.card {
width: 170px;
height: 100px;
background: url("otec_link.png") no-repeat;
display: inline-block;
}
.card:hover {
background: url("otec_link_gray.png") no-repeat;
color: black;
text-decoration: none;
}
.words {
color: #FFFFFF;
text-decoration: none;
}
.words:hover {
color: #000000;
text-decoration: none;
}

<div class="container">
<div>
<div class="centered" style="text-align:left;">
<a href="teachers/index.php" class="words"><span class="initials">O</span>nline<br><span class="initials">T</span>eacher<br><span class="initials">E</span>ducation<br><span class="initials">C</span>enter</a></div>
<a href="teachers/index.php"><span class="card"></span></a>
</div>
</div>

您可以运行代码来查看问题。

以下是我想要的：带有白色文本的红色框。鼠标悬停时，一个带有黑色文本的灰色框，其中包含可用文本和图形的锚链接。

以下是我得到的：带有白色文本的红色框。鼠标悬停在框上时，会出现一个带有白色文本的灰色框，当指针经过文本时，它会变为黑色，红色框会返回。文本行之间的定位链接有一个间隙。我试图创建两个基本上是链接的东西，一个用于框，另一个用于文本，以解决字体质量问题。

网站是comechildrensing.com。你可以去那里查看相关内容。它是左侧垂直红色菜单栏中的顶部按钮。如果有一个工具我可以用来在图形中制作干净、清晰的文本，它会让整个混乱消失。否则，我愿意接受任何能解决问题的解决方案。

Answer 1

现在您已经为三个不同的元素创建了三个不同悬停，用户可以(几乎(单独悬停在这三个元素上。最好是悬停一次，然后让它瞄准其他元素。

.container:hover .card {
background: url("otec_link_gray.png") no-repeat;
}

.container:hover .words {
color: black;
text-decoration: none;
}