如何使用php和css創建圖像翻轉鏈接

我試圖創建一個圖像翻轉按鈕來放置在一個php文件中。下面的CSS是...現在我將使用什麼PHP腳本來顯示按鈕？如何使用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; 
}

來源

2013-05-31 aizas5544

CSS適用於HTML，而不是PHP ... –

您可以使用HTML代碼，或者PHP腳本，輸出的html代碼：

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

在CSS中，＃表示某些元素的ID。

如果您計劃使用一個單一的頁面上有多個這樣的按鈕，你應該改變#quotebutton到.quotebutton（與在開始點），並使用它像這樣：

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

其中。在CSS中代表CLASS的一個元素。

HTML類可以被許多元素使用，而ID是元素的唯一標識符，並且不能在同一頁上使用2次。

來源

2013-05-31 01:36:41

你爲什麼試圖把它放在一個PHP文件？

幾件事情蝙蝠壽：

你不需要引號在你的CSS網址（「」）標籤。它可以只是網址（http://imagehere.com/sup.png）
懸停範圍不需要重新定義每個屬性。例如，你可以這樣做： #quotebutton a:hover { background-image: url(urlhere)"); }

編輯：尼古拉有一個更合適的實施答案。我爲你創造了一個尼古拉談論的事例： http://jsfiddle.net/XAtGP/

乾杯。 :)

來源

2013-05-31 01:39:52 Porschiey

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>

來源

2013-05-31 01:46:04

如何使用php和css創建圖像翻轉鏈接

回答

相關問題