我有一个关于某些 CSS 的问题，我确信它有一个简单的解决方案，但还不够明显，我还没有找到它。
我在我的 HTML 文件中定义了一个带有背景图像的 div，这是我在我的 CSS 文件中设置的。然后，我使用 CSS 为 div 设置悬停状态，以便背景图像在鼠标悬停时发生变化。然后，我将文本放在 HTML 文件中的 div 顶部，以制作一个带有文本的按钮。
这是我遇到问题的地方，但是 - 当我将鼠标悬停在图像（div 的背景图像）上时，图像会发生变化，但是当我的光标碰到它上面的文本时，悬停状态会变回常规的，也改变了背景图像，而文本没有改变。当我将光标从文本上移开时，它会变回悬停状态。
我在 http://jsfiddle.net/Cwca22/jk7ty/ 的 JSFiddle 中设置了代码 - 任何帮助将不胜感激！提前致谢！
【问题讨论】：
您可以真正简化您的代码。
HTML
<a class="button" href="directions.html">Get Directions</a>
CSS
a.button {
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat;
color: white;
display: block;
font-family: Ovo, serif;
font-size: 18px;
height: 42px;
line-height: 42px;
text-align: center;
width: 135px;
}
a.button:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
color: #fff;
}
:hover 仅在您将鼠标悬停在该元素或其子元素之一上时适用。您使用一个元素创建了按钮，然后创建了文本并使用 CSS 技巧将其放置在按钮上。只要您将鼠标悬停在文本上，浏览器就会认为您不再将鼠标悬停在按钮上，并丢弃新背景。
此外，样式级联。因此，在:hover 的规则中，您只需指定已更改的属性即可。 （在这种情况下，background 和 color。）
【讨论】：
将 Get Directions 链接移动到主 div 内。您需要对其进行一些格式化，但这应该会让您非常接近。
<a href="directions.html">
<div id="getDirections" class="getDirections" style="margin-top: 10px; margin-left: 131px;">
<h3 class="getDirectionsText" style="margin-left: 154px; margin-top: -28px; font-size: 14px; font-weight: 300;">Get Directions</h3>
</div>
</a>
【讨论】：
我为您重写并简化了它，现在可以使用：
这是链接：
<a href="directions.html" class="getDirections">Get Directions</a>
这是 CSS：
a.getDirections {
display: block;
background: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions-button.png') no-repeat top left;
width: 135px;
height: 30px;
font-family: Ovo, serif;
font-size: 15px;
color: white;
text-align: center;
text-decoration: none;
padding: 12px 0 0 0;
}
a.getDirections:hover {
background: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button- hover.png') no-repeat top left;
}
需要注意的几点：
如果您愿意，也可以在 JSFiddle 上查看：
【讨论】：
我会将所有 HTML 保留在 HTML 部分，将 CSS 保留在 CSS 部分。这有助于保持一切正常，尤其是在您进行测试时。
这会给你一个很好的结果：
<a href="directions.html"><div id="getDirections" class="getDirections"><h3 class="getDirectionsText">Get Directions</h3></div></a>
#getDirections {
display: table;
}
.getDirections {
background-image: url('http://f.cl.ly/items/0G0b0m1k0A1T2c3D102H/get-directions- button.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: pointer;
}
.getDirections:hover {
background-image: url('http://f.cl.ly/items/0U1O3P1F2h312W0j3k1Z/get-directions-button-hover.png');
background-repeat: no-repeat;
width: 135px;
height: 42px;
cursor: }
a{
text-decoration:none;
}
h3 {
font-family: Ovo, serif;
font-size: 18px;
color: white;
display:table-cell;
vertical-align: middle;
text-align: center;
}
如果您使用这种代码样式，您可以更改元素大小，而无需重新调整文本的居中。
【讨论】：