懸停時在菜單欄下的圖像顯示

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>