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>

悬停菜单栏下的图像显示

1 个答案: