我正在我的网站上创建一个菜单,上面写着这样的内容:
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;}
在悬停每个列表项时,我想在悬停时显示一个图像(图像显示在每个列表项文本的边界处)。这意味着出现的图像不必出现在文本之上,也不必替换。它只是在文本的一侧移动,并在悬停结束时消失。
对于每个列表项,都有一个单独的图像与翻转相关联,并且必须在鼠标从列表项文本移开时消失。我不确定如何获得上述效果,我所遵循的所有链接都是在翻转时更改图像的指南。有什么建议吗?
最佳答案
您在每个链接后的列表项中添加一张图片。您在图像上设置 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; }
关于javascript - 列表项中的翻转效果(不在图像上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11583720/