[英]Rollover effect (not on image) in list item
我正在网站上创建一个菜单,内容如下:
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; }
你可以这样做:
<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')}
这是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元素的高度/宽度或填充以调整图像的尺寸。
这是工作的小提琴: 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;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.