CODEWITHSUNDEEP
htmlcss
Giant
Giant

Reputation: 1649

Image hover not working..on pure css

<div id="headermenu">
    <ul >
        <li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li>
        <li id="menu2"><a href="#"><img src="images/menu2.png"/></a>
            <ul class="submenu2">
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu2</a></li>
            </ul>
        </li>           
        <li id="menu3"><a href="#"><img src="images/menu3.png" /></a></li>
        <li id="menu4"><a href="#"><img src="images/menu4.png"/></a></li>
        <li id="menu5"><a href="#"><img src="images/menu5.png"/></a></li>
    </ul>   
</div>

css

#headermenu ul ul {
    display: none;
}
#headermenu ul{
    padding:0; 
    margin:0; 
    white-space:nowrap;
}
#headermenu ul li{
    width: 20%; 
    list-style-type:none; 
    display:inline-block;
    margin-bottom:15px;
    float:left;
    left:0;
}
#menu1:hover{
    background: url('images/menu1hover.png');
}

Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..

Upvotes: 0

Views: 1512

Answers (3)

Ruddy
Ruddy

Reputation: 9923

As you haven't given us all the information we need to solve this I will take a guess. As I said in the comments. It could be caused by the <img> sitting on the background, so when you hover you cant see the background at all.

HTML:

<div id="headermenu">
    <ul>
        <li id="menu1"><a href="#"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/></a>
        </li>
    </ul>
</div>

CSS:

#headermenu ul ul {
    display: none;
}
#headermenu ul {
    padding:0;
    margin:0;
    white-space:nowrap;
}
#headermenu ul li {
    width: 20%;
    height: 50px;
    list-style-type:none;
    display:inline-block;
    margin-bottom:15px;
    float:left;
    overflow: hidden;
    border: 1px solid;
}
#menu1:hover {
    background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}

Here is your code as is, the background image is changing but cannot be seen because of the <img> in front.

DEMO HERE

Now here is the same code but the <img> being removed.

<div id="headermenu">
    <ul>
        <li id="menu1"><a href="#"></a>
        </li>
    </ul>
</div>

DEMO HERE

We can see that the hover does work but the <img> was coving it up.

Solutions:

Just simply set a background on each li and then a background when on hover.

CSS:

#menu1 {
    background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
#menu1:hover {
    background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg');
}

DEMO HERE

You could also set the display to none for the img when on hover.

CSS:

#menu1 {
    background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg');
}
#menu1:hover img {
    display: none;
}

DEMO HERE

There are many more ways but these are two that will work.

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

try this code
DEMO

<body> <a href="http://www.corelangs.com" class="urlImg" title="Corelangs link"></a> </body> 


.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }

Upvotes: 0

number8pie
number8pie

Reputation: 147

You need to use either a background image, or an actual img for both before and after states. In your example, when the mouse hovers over #menu1 the background behind the menu1.png image is changed but menu1.png is obscuring it from view.

Upvotes: 0

Related Questions