jquery - 为突出显示的链接设置动画 (animer un lien surligné)

Question

有一段时间，我尝试重现链接创建时突出显示标题的效果。 http://www.platige.com/en/

但我无法重现这种效果。 我想知道是否可以只在 css3 中使用这种效果？或者只有在 jquery 中才有可能？

我测试了几个jquery，但我无法达到预期的效果。

我只是请求一点帮助。谢谢 ! 我不能把我的链接 fiddle ...;-(

<p> <span class="lien"><a href="#">Titre</a></span></p> <p> <span class="lien"><a href="#">Titre long long long long long long long</a></span></p>

CSS

.lien a {color: #585858; text-decoration: none; transition: all 0.2s ease 0s;} .lien a:hover {background:#585858; color:#b4b4b4; padding:0 10px;}

Answer 1

这是我整理的一个基本示例:http://jsfiddle.net/Czh8R/

HTML:

<a href=http://www.example.com>Link to an example page</a>

CSS:

a{
    font-size: 20px;
    color: #000;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAxJREFUGFdj+M/AAAADAQEAYyRV0wAAAABJRU5ErkJggg==);
    background-size: 1% 100%;
    background-repeat: no-repeat;
    transition: 0.5s all
}
a:hover{
    background-size: 100% 100%;
    transition: 0.5s all
}

background-image 数据 uri 用于 1px 浅红色图像。我用 http://dopiaza.org/tools/datauri/index.php 生成了它必须使用图像，因为转换需要 background-size。我没有为 transition 添加供应商前缀，因此您必须相应地添加 -webkit-、-moz- 等。