图像显示在菜单栏下悬停 [英] image display under menu bar on hover

问题描述

我想要一个菜单​​，其中包含与每个选项相关联的图片。
我希望该图像被隐藏，并仅在鼠标悬停在特定选项上显示。
加上，我想要的图像被一半覆盖的菜单栏，所以它将只显示它的下半部分。任何想法如何做到吗？

I would like to have a menu with an image associated with every option. I want that image to be hidden and shown only on mouse hover on the particular option. Plus, I want the image to be half covered by the menu bar so it will show just its bottom half. Any idea of how to do it???

我尝试过类似

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

但它甚至不在我想要完成的地方

but it's not even near of what i want to accomplish

推荐答案

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>

这篇关于图像显示在菜单栏下悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！