CODEWITHSUNDEEP
htmlcssbackgroundhoverhtml-lists
user910930
user910930

Reputation: 73

Background image to show on hover - list item

Attempting to get a background image to show only on hover of a list item. Currently at this:

<div id="nav">
        <ul>
            <li><a href="#">WHO ARE WE?</a></li>
            <li><a href="#">WHAT WE DO?</a></li>
            <li>GALLERY</li>
            <li>CALENDAR</li>
            <li>HISTORY</li>
            <li>CONTACT US</li>
        </ul>
</div>

With this:

#nav {
    position: fixed;
    margin-left: 100px;
    width: 200px;
    float: left;
    margin-top: 100px;
    color: white;
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: 20px;
    font-size: 2em;
}

li:hover {
    background: url('images/arrow.png') no-repeat;
}

Having no luck so far. Any pointers would be much appreciated. Image is 300x205 if it makes any difference.

Upvotes: 0

Views: 419

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24703

This code works fine

DEMO http://jsfiddle.net/x8dSP/2603/

The issue is more likely the file path specified within the CSS to the background image. You may need to go up a folder level depending on where you have the images stored in comparison to where the CSS file is stored. eg:

background: url('../images/arrow.png') no-repeat;

Upvotes: 1

Related Questions