翻转效果（不是图像）

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> 

编辑回应运算的评论

如果你想要的图标/图像，当你翻转的锚，而不是出现的李。你会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;}