0

私は自分のウェブサイトに次のように書かれたメニューを作成しています:
HTML コード

<ul id="menu">
<li><a href="index.aspx">Home</a></li>
<li><a href="about.aspx">About</a></li>
<li><a href="sample.aspx">Sample</a></li>
</ul>

CSS コード

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}

各リスト項目のホバーで、ホバー時に画像を表示したい (画像は、各リスト項目のテキストの境界に表示されるようなものです)。これは、表示されている画像がテキストの上に表示される必要がなく、置き換える必要がないことを意味します。テキストの横に移動し、ホバーが終わると消えます。
リスト項目ごとに、ロールオーバーに関連付けられた個別の画像があり、マウスがリスト項目のテキストから離れると消える必要があります。上記の効果を得る方法がわかりません。たどったすべてのリンクは、ロールオーバー時に画像を変更するためのガイドです。助言がありますか？

4

4 に答える 4

1

各リンクの後のリスト項目内に画像を追加します。画像を設定display: none;すると、ホバー時にそれらを表示できますul#menu li:hover img {display: inline-block}

デモ: http://dabblet.com/gist/3151894

HTML は単純になります。

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="imghome.png"></li>
    <li><a href="about.aspx">About</a><img src="imgabout.png"></li>
    <li><a href="sample.aspx">Sample</a><img src="imgsample.png"></li>
</ul>

CSS では、以下のみを追加しました。

#menu li img {
    width: 15px;
    display: none;
}
#menu li:hover img { display: inline-block; }

EDIT：代わりに、画像は次を使用して表示できます

#menu a:hover + img { display: inline-block; }
于 2012-07-20T16:55:41.333 に答える
0

これがcssです：

ul#menu li a:link,ul#menu li a:visited {color:#333333;text-decoration:none;}
ul#menu li a:hover,ul#manu li a:active {color:#a61607;text-decoration:none;}
ul#menu li img {display: none;}
ul#menu li:hover img {display: inline-block;}​

3つのリンクすべてに同じ画像を使用し、使用するテスト画像をグーグルで検索しました。もちろん、好きな画像を使用します。

<ul id="menu">
<li>
    <a href="index.aspx">
        Home
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="about.aspx">
        About
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>
<li>
    <a href="sample.aspx">
        Sample
        <img src="http://icons.mysitemyway.com/wp-content/gallery/3d-glossy-green-orbs-icons-symbols-shapes/thumbs/thumbs_104626-3d-glossy-green-orb-icon-symbols-shapes-check-mark5-ps.png" />
    </a>
</li>

</ p>

opのコメントに応答するように編集します

liの代わりにアンカーをロールオーバーしたときにアイコン/画像を表示したい場合。4番目のcss行を次のように変更します。

ul#menu a:hover img {display: inline-block;}​

ただし、要素のサイズを変更したり配置したりするために必要な追加のCSSはわかりません。このCSSとHTMLだけをjsfiddleで実行すると、「フラッター」の問題が発生します。アンカーにカーソルを合わせると、画像が表示されますが、他のすべての要素が再配置され、一種のホバー/非ホバーが発生します。リスト/リストアイテム内のアンカーをブロック要素にする次のCSSルールを追加すると、問題はありません。

ul#menu li a {display: block;}

さらに、アンカーまたはli要素の高さ/幅またはパディングを設定して、画像のサイズに合わせて調整することもできます。

于 2012-07-20T17:04:57.843 に答える
0

これが実用的なフィドルです：http：//jsfiddle.net/Q6CaM/

HTML

<ul id="menu">
    <li><a href="index.aspx">Home</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="about.aspx">About</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
<li><a href="sample.aspx">Sample</a><img src="http://www.fmwconcepts.com/misc_tests/lena_label2.jpg" /></li>
</ul>​

CSS

li{display:block; overflow:hidden;}
a{display:inline-block; float:left; margin:0 5px 0 0;}
img {display:none; position:absolute; }
li:hover img{display:inline-block;}
于 2012-07-20T17:07:24.293 に答える
0

あなたはこれを行うことができます：

<ul id="menu">
<li><a id="firstLi" href="index.aspx">Home</a></li>
<li><a id="secondLi" href="about.aspx">About</a></li>
<li><a id="thirdLi" href="sample.aspx">Sample</a></li>
</ul>


a#firstLi:hover {background: url('images/image1.png')}
a#secondLi:hover {background: url('images/image2.png')}
a#thirdLi:hover {background: url('images/image3.png')}
于 2012-07-20T17:00:58.347 に答える