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

还有很多方法，但这两种方法都有效。

Answer 2

您需要在状态之前和之后使用背景图像或实际img。在您的示例中，当鼠标悬停在＃menu1上时，menu1.png图像背后的背景会发生变化，但menu1.png会将其从视图中遮挡。

Answer 3

试试这个代码
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'); }

图像悬停不起作用..纯粹的CSS

3 个答案: