Question

我正在尝试创建一个图像翻转按钮以放置在php文件中。 css在下面......现在用什么php脚本来显示按钮？

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

Answer 1

为什么要尝试将其放在PHP文件中？

关键的一些事情：

您的CSS网址（“”）标记中不需要引号。它可以是url（http://imagehere.com/sup.png）
悬停范围不需要重新定义每个属性。例如，您可以这样做： #quotebutton a:hover { background-image: url(urlhere)"); }

编辑：尼古拉有更合适的实施答案。我为你创造了一个尼古拉谈论的例子： http://jsfiddle.net/XAtGP/

干杯。 :)

Answer 2

您可以使用html代码或输出html代码的PHP脚本：

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

在CSS中，＃代表某个元素的 ID 。

如果您打算在一个页面上使用多个此类按钮，则应将#quotebutton更改为.quotebutton（在开头使用dot）并使用它如下：

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

CSS中的。代表元素的 CLASS 。

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

Answer 3

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>

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

3 个答案: