アンカータグがホバーとアクティブで画像を変更する

Question

ホバーとアクティブでアンカータグの画像を変更しようとしていますが、動作していません。

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

Answer 1

タグはインライン要素です。ブロック要素が必要です。引用符を使用してURLをラップする

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

Answer 2

てみてください、

**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'); 
} 

Answer 3

あなたはあなたのCSSは、実際の画像のURIをターゲットにしていることを絶対によろしいですか？言い換えれば、あなたのCSSがHTML文書そのものの一部である場合、あなたの画像は、現在のHTML文書に相対的なimagesというフォルダにあるはずです。

しかし、このCSSが、01​​というフォルダにある外部スタイルシートの一部である場合、画像にアクセスするために1つ上のレベルになる相対パスを使用する必要があります。

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

page.html 

、少なくとも2つの理由のためにこのような良いアイデアではありません何を達成しようとしているため、別の画像を使用して、

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

ところで、次の形式でbackground-imageルールが含まれている必要がありあなたのスタイルシート：

1. すべての画像はブラウザの追加要求です - 最初のページの表示が乱雑になることがあります
2. 枚の追加の画像はリクエストのみにロードされているので、両方を除去するためにCSS spritesを使用して要求された画像は、実際

をロードされた時点で醜いちらつき効果をもたらすであろう（あなたがリンクの上にマウスを移動すると、それをなどをクリックしてください）これらの問題の

Answer 4

これを試してください。それは働いている:) ちょうどホバーイメージのためにsrc =を追加してください。

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