0

すべてのオプションに関連付けられた画像を含むメニューが必要です。その画像を非表示にして、特定のオプションにマウスを合わせたときにのみ表示したい。さらに、メニューバーで画像の半分を覆い、下半分だけが表示されるようにします。それを行う方法のアイデアはありますか???

私は次のようなものを試しました

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

しかし、それは私が達成したいことの近くではありません

4

1 に答える 1

0

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>
于 2013-01-20T11:39:27.217 に答える