css - 更改 div 的背景图像(使用 CSS)并将文本放置在 div 的顶部？

Question

我有一个关于某些 CSS 的问题，我确信有一个简单的解决方案，但还不够明显，我还没有找到它。

我在我的 HTML 文件中定义了一个带有背景图像的 div，我在我的 CSS 文件中设置了它。然后，我使用 CSS 为 div 设置悬停状态，以便背景图像会在鼠标悬停时发生变化。然后我将文本放在我的 HTML 文件中的 div 顶部，以制作一个带有文本的按钮。

然而，这是我遇到问题的地方 - 当我将鼠标悬停在图像(div 的背景图像)上时，图像会发生变化，但是当我的光标碰到它上面的文本时，悬停状态会变回常规的，也改变了背景图像，而文本没有改变。当我将光标从文本移开时，它会变回悬停状态。

我在 http://jsfiddle.net/Cwca22/jk7ty/ 的 JSFiddle 中设置了代码- 任何帮助将不胜感激!提前致谢!

Answer 1

您真的可以简化您的代码。

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 的规则中，你只需要指定已经改变的属性。 (在本例中，背景 和颜色。)

fiddle :http://jsfiddle.net/jk7ty/10/