列表項中的滾動效果（不在圖像上）

Question

我正在網站上創建一個菜單，內容如下：
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;}

在每個列表項的懸停上，我要在懸停上顯示一個圖像（這些圖像應顯示在每個列表項的文本邊界處）。 這意味着顯示的圖像不必出現在文本上方，也不必替換。 它只是在文本的側面移位，而在懸停結束時消失。
對於每個列表項，都有一個單獨的圖像進行翻轉，並且必須消失，將鼠標從列表項文本移開。 我不確定如何獲得上述效果，我所遵循的所有鏈接都是指導如何在翻轉時更改圖像。 有什么建議么？

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

編輯 ：或者，可以使用顯示圖像

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

Answer 2

你可以這樣做：

<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')}

Answer 3

這是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;}​

我對所有三個鏈接使用了相同的圖像，在Google搜索的測試圖像上使用。 顯然，您將使用所需的任何圖像。

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

編輯以回應op的評論

如果您希望在滾動錨點而不是li時顯示圖標/圖像。 您可以將第4個CSS行更改為如下所示：

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

但是，我不知道您還需要什么額外的CSS來確定元素的大小或位置。 當我在jsfiddle中運行此CSS和HTML時，我遇到了一個“波動”問題。 將鼠標懸停在錨點上時，會顯示圖像，但會重新定位所有其他元素，並且會發生某種懸停/不懸停的情況。 如果添加以下CSS規則，使我的錨定在“列表/列表項”塊元素內，則沒有問題。

ul#menu li a {display: block;}

另外，您還可以設置錨點或li元素的高度/寬度或填充以調整圖像的尺寸。

Answer 4

這是工作的小提琴： 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;}