css - 链接悬停 css 样式问题

标签 css

<分区>

我想知道是否可以使用纯 css 实现图像中的链接悬停样式,或者我们需要使用背景图像、js 或 jquery 等来实现此目的!

enter image description here

任何示例将不胜感激:) 谢谢,

最佳答案

最好的方法(例如,如果您需要支持 Internet Explorer 或想要自定义箭头)是使用 50% 100%

的背景

HTML:

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Another link</a></li>
</ul>

CSS:

li { float: left; padding-bottom: 16px; }
li:hover { background: 50% 100% no-repeat url(http://www.staypoland.com/images/arrow-city-up.gif); }
a { float: left; }
a:hover { background: blue; }​

http://fiddle.jshell.net/Mcz3P/

关于css - 链接悬停 css 样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12596629/

上一篇:image - 如何用html5/css3技术替换图片

下一篇:html - 使用 css/javascript 进行图像 mask

相关文章:

jquery - 无法使内联表单标签在 InfoWindow 中工作

javascript - 具有多个图像且无重复的自动 slider

javascript - 反复左右滑动div

css - 带有视口(viewport)滚动内容的标题 100% 宽度

jquery - 在 css 或 jquery 中,有没有一种方法可以在 div 的边框上添加一些东西?

css - 使div 100% 页面宽度

WebKit 中的 CSS : Overriding '-webkit-border-image' with 'none' or equivalent

html - 如何让 flexbox 容器只延伸到最长的内部元素?

html - 如何使两个表行之间的空间变小 css

jquery - 第二个标题根据滚动淡入或淡出