Create a navigation list that changes its image on hover,but it doesn't work

Question

HTML

<ul id="NavList">
    <li id="Home"><a href="Second.aspx"></a></li>
    <li id="About"><a href="Second.aspx"></a></li>
</ul>

CSS:

#Home {
    background: url('NavIcons/1.gif');
}
#Home a:hover {
    background: url('NavIcons\2.gif');
}

I am creating a navigation list that changes its image on hover, but it doesnt work.

Pranay Rana · Answer 1 · 2014-02-04T08:54:26.633

0

try like this

#Home {
    background:  url(NavIcons/1.gif) 0 0 no-repeat;
}

#Home:hover {
    background:  url(NavIcons/2.gif) 0 0 no-repeat;
}

JsFiddle demo : But this for changing color on hover

Please check for image URL if not coming properly

edited Feb 04 '14 at 08:54

answered Feb 04 '14 at 08:44

Pranay Rana

175,020
35
237
263

This will work, but it's because Stella has a `\2` instead of a `/` for their URL. – Albzi Feb 04 '14 at 08:44
1

`#Home :hover` <-- **WRONG** – Mr. Alien Feb 04 '14 at 08:45

score 0 · Answer 2 · answered Feb 04 '14 at 08:46

0

a tag will probably not be large enough to show your image. You can try this

#Home {
    background: url('NavIcons/1.gif');
}
#Home:hover {
    background: url('NavIcons/2.gif');
}

or give width and height to a.

answered Feb 04 '14 at 08:46

Kuzgun

4,649
4
34
48

both of them(a tag and li tag) have same width...but it does not work :( – Stella Feb 04 '14 at 09:14
Are image paths correct? Is NavIcons in same folder with your css or are you using inline style? – Kuzgun Feb 04 '14 at 09:51

score 0 · Answer 3 · answered Feb 04 '14 at 09:08

0

I think you might want to try styling the A rather then the LI since it's just a placeholder as list item for the actual link.

#Home a {
    background: url('NavIcons/1.gif');
}
#Home a:hover {
    background: url('NavIcons/2.gif');
}

answered Feb 04 '14 at 09:08

Remy Lagerweij

177
2
7

score 0 · Accepted Answer · edited May 23 '17 at 11:45

If you want to show the background change of #Home or #About when hovering only on a then you can use the following:

HTML

<ul id="NavList">
    <li id="Home"><a href="Second.aspx">1</a><div></div></li>
    <li id="About"><a href="Second.aspx">2</a><div></div></li>
</ul>

CSS

#Home,#About {
    position:relative;
    width:70px;
    height:50px;
}
#Home div, #About div{
    position:absolute;
    background: url('https://i.stack.imgur.com/2JzQz.jpg');
    background-position:-20px 0px;
    top:0px;
    width:100%;
    height:100%;
}
#Home a,#About a{
    position:absolute;
    top:20px;
    left:20px;
    z-index:100;
}
#Home a:hover+div , #About a:hover+div{
    background: url('https://i.stack.imgur.com/7rx8G.jpg');
    background-position:-20px 0px;
}

Demo

Got this idea from How to style the parent element when hovering a child element? .My CSS is different but using same idea.

Create a navigation list that changes its image on hover,but it doesn't work

4 Answers4

Demo