1

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 做到这一点？

4

4 回答 4

3

删除 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/

于 2012-06-13T10:52:35.443 回答
3

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

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

背景图像精灵： 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;宽度/高度属性设置为.buttons_position

于 2012-06-13T10:52:44.557 回答
1

尝试： 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;
}
于 2012-06-13T10:52:35.720 回答
0

它应该是：

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 类的元素内

于 2012-06-13T10:57:54.407 回答