html - 悬停在菜单栏下的图像显示

Question

我想要一个菜单​​，其中每个选项都有一张图片。我希望该图像被隐藏并仅在鼠标悬停在特定选项上时显示。另外，我希望图像被菜单栏覆盖一半，这样它只会显示下半部分。知道怎么做吗？？？

我试过类似的东西

HTML:

<div id="menu_bar">
     <a href="javascript:change(0)"> text <img src="image"> </a>
     <a href="javascript:change(1)"> text <img src="image"> </a>
     <a href="javascript:change(2)"> text <img src="image"> </a>
</div>

CSS:

a>img { display: none; }
a:hover>img { display: block; }

但这离我想要完成的还差得很远

Answer 1

html:

<ul class="main-menu">
     <li id="el-1"><span class="text">Item</span><img src="item-1.png" alt="" /></li>
     <li id="el-2"><span class="text">Item</span><img src="item-1.png" alt="" /></li>
</ul>

CSS

<style>
.main-menu li > span.text {
    display:block;
    position:relative;
    z-index:1;
    background:white;
}
.main-menu li {
    overflow:hidden;
}
.main-menu li > img {
    display:none;
}
.main-menu li#el-1:hover > img {
    display:block;
    margin-top:-20%;
}
</style>