Question

HTML：

<a href="" class="buttons_position"><img src="images/order.png" height="49" width="214"></a>

CSS：

.buttons_position {
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position a:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

但悬停图像不会更改。如何用CSS做到这一点？

Answer 1

删除IMG标签上的图像。写得像这样：

.buttons_position {
    background-image: url(images/order.png);
    background-repeat: no-repeat;
    display:block;
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);        
}

<强> HTML

<a href="#" class="buttons_position"></a>

选中此http://jsfiddle.net/X9wCL/

Answer 2

您的背景图片在悬停到标签时应用，并被标签内的img覆盖。将img标记替换为您可以隐藏的文本（搜索图像替换）并将不同的背景应用于标记的默认和悬停状态。将一个单独的图像（精灵）作为背景并在悬停时使用背景位置将是有益的。

图片替换：http://css-tricks.com/css-image-replacement/

background-image sprite：http://nicolasgallagher.com/css-background-image-hacks/

查看其他答案，正确的方法应该是：

.buttons_position {
    background-image: url(images/order.png);
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

您可能还需要将display: block;和width / height属性设置为.buttons_position

Answer 3

尝试： HTML：

<a href="" class="buttons_position"></a>

CSS：

.buttons_position {
    padding: 0 0 0 10px;
    background-image: url(images/order.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    border: 0px;
    margin: 0px;
}
.buttons_position a:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

Answer 4

它应该是：

a.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

您的链接不在类.button_position

的元素中

使用CSS更改链接按钮上的图像

4 个答案: