列表项中的滚动效果(不在图像上)
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')}
这是工作小提琴: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;}
这是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;}
我对所有三个链接都使用了相同的图片,在谷歌上搜索了一个测试图片。很明显,你会使用任何你想要的图像。
<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>
编辑以回应操作人员的评论
如果你想在滚动锚点而不是li时显示图标/图像。你可以将第4行css更改为这样的内容:
ul#menu a:hover img {display: inline-block;}
然而,我不知道你还需要什么额外的CSS来调整或定位你的元素。当我在jsfiddle中只运行这个CSS和HTML时,我遇到了一个"颤动"的问题。当悬停在锚点上时,图像会显示出来,但它会重新定位所有其他元素,并发生某种悬停/非悬停。如果我添加以下CSS规则,使我的锚在列表/列表项块元素中,我就没有问题了。
ul#menu li a {display: block;}
此外,您还可以设置锚点或li元素的高度/宽度或填充,以根据图像的尺寸进行调整。
- 使用 nameProp 的 JQuery 图像滚动更新在 Firefox 和 Chrome 中不起作用
- 使用javascript只滚动一个图像进行图像滚动
- 如何在jcarousel上进行图像滚动
- 固定图像滚动移动位置
- 如何制作图像滚动
- 带有onclick切换的Javascript图像滚动
- 基础 4 - 图像滚动以显示另一个图像
- 图像滚动淡入,完成后转到下一部分
- 使用图像滚动达到页面中的最大内容,然后应该使用窗口百分比隐藏图像
- 如何创建垂直图像滚动条
- 使用查询的水平图像滚动
- 如何将图像滚动添加到Javascript中
- javascript鼠标滚轮图像滚动
- 图像滚动<img>并且<a>事件
- 正在停止图像滚动paraScrolling
- jQuery - 文本和图像滚动效果不起作用
- Jquery插件图像滚动与前一个和下一个图像可见的一面
- 在没有实际文本触发的情况下,淡出/淡出图像滚动
- 动画图像滚动
- 如何使用JavaScript将图库和图像滚动条放在一个页面上