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>