html - 图像悬停不起作用..在纯CSS上

Question

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

悬停不起作用，我想知道如何制作带有图像悬停的列表，我还想知道如何在 li 悬停时制作子列表。如果子列表上有另一个列表如何制作它..在纯 css 上..

Answer 1

由于您没有向我们提供解决此问题所需的所有信息，我将进行猜测。正如我在评论中所说。这可能是由 <img> 引起的坐在背景上，所以当你悬停时你根本看不到背景。

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

这是您的代码，背景图像正在更改但由于 <img> 而无法看到在前面。

DEMO HERE

---

现在这里是相同的代码，但 <img>被移除。

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

DEMO HERE

我们可以看到悬停确实有效，但 <img>正在掩盖它。

---

解决方案:

只需为每个 li 设置背景即可然后是悬停时的背景。

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

您还可以将 img 的显示设置为无悬停时。

CSS:

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

DEMO HERE

还有很多方法，但只有这两种可行。