懸停和活動的錨標記更改圖像

我試圖更改懸停和活動的錨標記圖像，但它不工作。懸停和活動的錨標記更改圖像

HTML：

<div> 
    <div id="accordion"> 
     <h3><a href="" runat="server" id="aCollection">test</a></h3> 
     <div class="acsection" runat="server" id="divCollection"> 
      <ul> 
       <li runat="server" id="collectionmenu1"><a href="1.aspx">page-1</a></li> 
       <li runat="server" id="collectionmenu2"><a href="2.aspx">page-2</a></li> 
       <li runat="server" id="collectionmenu3"><a href="3.aspx">page-3</a></li> 
       <li runat="server" id="collectionmenu4"><a href="4.aspx">page-4</a></li> 
      </ul> 
     </div> 
    </div> 
    <h3><a href="5.aspx">Group</a></h3> 
    <h3><a href="6.aspx">Send</a></h3> 
    <h3><a href="7.aspx">contact</a></h3> 
</div>

CSS：

#aCollection 
{ 
    background-image: url(images/collection.jpg); 
} 

#aCollection:hover 
{ 
    background-image: url(images/collection_hover.jpg); 
} 

#aCollection:active 
{ 
    background-image: url(images/collection_active.jpg); 
}

來源

2011-08-06 sam

我能夠通過更改代碼隱藏中的屬性來修復它。 – sam

標記是一個內嵌元素。你需要一個塊元素。

#aCollection { 
    display: block; 
    width: 50px; 
    height: 50px; 
    background: url('../images/image.jpg') no-repeat top left; 
} 
#aCollection:hover { 
    background-image: url('../images/image_hover.jpg'); 
} 
#aCollection:active { 
    background-image: url('../images/image_active.jpg'); 
}

來源

2011-08-06 15:28:01 blejzz

我已經添加了上面的代碼，但沒有運氣 – sam

嘗試背景：url（'images/your_image.jpg'）no-repeat top left;並檢查您的路徑是否正確（您可能需要../images） – blejzz

是的，您的建議適用於懸停。但仍然活動不起作用 – sam

嘗試用引號來包裝你的網址，

**stylesheet code** 
#aCollection 
{ 
    background-image: url('images/collection.jpg'); 
} 
#aCollection:hover 
{ 
    background-image: url('images/collection_hover.jpg'); 
} 

#aCollection:active 
{ 
    background-image: url('images/collection_active.jpg'); 
}

來源

2011-08-06 15:29:39 Waltsu

我試過了，但還沒有工作仍然 – sam

你絕對確保你的CSS的目標是實際圖像的URI？換句話說，如果您的CSS是HTML文檔本身的一部分，那麼您的圖片應該位於相對於當前HTML文檔而言名爲images的文件夾中。

但是，如果這個CSS是外部樣式表的一部分，它位於可以說css文件夾中，您需要使用一個相對路徑，該路徑會上一級以訪問圖像。

css 
    -> stylesheet.css 
images 
    -> collection.jpg 

page.html

樣式表應該包含background-image規則的格式如下

background-image: url('../images/collection.jpg');

BTW，使用單獨的圖像爲您所要實現的目標是不是至少有兩個原因，一個好主意：

每張圖片都是一個額外的瀏覽器請求 - 太多請求可能會混亂初始頁面顯示
個的額外的圖像僅應要求加載（當你將鼠標移到該鏈接，點擊等），這將產生在時間一個醜陋的閃爍效果請求的圖像實際上是加載

因此使用CSS sprites消除雙方這些問題。

來源

2011-08-06 15:31:44 brezanac

是的CSS是在代碼本身和圖像文件夾在那裏 – sam

試試這個。它的工作:)。只需添加src =懸停圖像，當鼠標懸停時也添加src =。

<a href="#"><img src="blah.jpg" onMouseOver=src="blah-hover.jpg" onMouseOut=src="blah.jpg"></a>

來源

2012-12-19 02:46:58 carl

懸停和活動的錨標記更改圖像

回答

相關問題