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的规则中，您只需指定已更改的属性。（在这种情况下，background和color。）

小提琴：http://jsfiddle.net/jk7ty/10/

Answer 2

在主div中移动Get Directions链接。你需要为它做一些格式化，但这应该让你非常接近。

<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>

Answer 3

我为你重写并简化了它，它现在有效：

这是链接：

<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;
}

有几点需要注意：

如果你给它一个显示器，你可以将A标签视为div：block;属性
由于我在顶部放了12px填充，我从高度减去12px：属性只剩下30px（按钮实际上是42px高）
我建议阅读“盒子模型”（google it）以便将来提供帮助

如果您愿意，也可以在JSFiddle上查看：

http://jsfiddle.net/nerdburn/95ysC/

Answer 4

我会保留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;
}

如果您使用此代码样式，则可以更改元素大小，而无需重新处理文本的居中。

让div的背景图像更改（使用CSS），文本位于div的顶部？

4 个答案: