如何使用php和css创建图像翻转链接

#quotebutton {
    position: fixed;
    display: block;
    width: 147px;
    height: 35px;
    left: 830px;
    top: 400px;
    background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
    background-repeat: none;
}
#quotebutton a:hover {
    position: fixed;
    display: block;
    width: 147px;
    height: 35px;
    left: 830px;
    top: 400px;
    background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
    background-repeat: none;
}

为什么要把它放在PHP文件中?

有几件事要做:

你不需要在你的CSS url(")标签中使用引号。可以是url(http://imagehere.com/sup.png)
1. 悬停作用域不需要重新定义每个属性。例如，你可以这样做: #quotebutton a:hover { background-image: url(urlhere)"); }

编辑:Nikola有一个更合适的答案。我给你们举了一个例子来解释尼古拉所说的http://jsfiddle.net/XAtGP/

欢呼。:)

您可以使用html代码，或php脚本输出html代码:

<a id="quotebutton" href="#">Quote</a>

在CSS

, # 代表 ID 的元素。

如果您打算在一个页面上使用多个这样的按钮，您应该将#quotebutton更改为。quotebutton(以圆点开头)，并像这样使用:

<a class="quotebutton" href="#">Quote</a>

, 。CSS中的表示元素的CLASS。

HTML类可以被多个元素使用，而ID是元素的唯一标识符，不能在同一个页面上使用两次。

css:如果锚标记嵌套在#quotebutton

#quotebutton>a{
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton>a:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}

html例子:

<div id="quotebutton">
    <a herf="#"></a>
</div>

如果不是并且#qoutebutton是锚点，则CSS是如下:

a#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
a#quotebutton:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}

html例子:

<a id="quotebutton" href="#">quotebutton</a>