Geek Answers Handbook

Anchor mark changes image on hover and active

I am trying to change the image of the anchor label on hover and active, but it does not work.

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); }
+5
source share
5 answers

Try it. it works:). just add src = for the hover image and also add src = for the mouse output.

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

A tag is an inline element. You need a block element.

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

Try tying your URLs with quotes,

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

Are you absolutely sure that your CSS targets the actual image URIs? In other words, if your CSS is part of the HTML document itself, your images should be in a folder called images relative to the current HTML document.

However, if this CSS is part of the external stylesheet, which is located in the css folder, you need to use a relative path that will go one level to access the images.

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

Your stylesheet should contain background-image rules in the following format

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

By the way, using separate images for what you are trying to achieve is not such a good idea for at least two reasons:

  • Each image represents an additional browser request - too many requests may clutter the page’s home screen
  • Additional images are downloaded only on demand (when you move the mouse over the link, click it, etc.), which will lead to an ugly flickering effect in time when the requested image is actually loaded.

So use CSS sprites to fix both of these problems.

0
source

use: focus-inside Same thing: focus: active use: focus-inside it will help

0
source

More articles:


All Articles