1

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

但我无法重现这种效果。我想知道是否可以仅在 css3 中使用此效果？还是只能在 jquery 中使用？

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

我只是请求一点帮助。谢谢你 ！我不能把我的链接小提琴...;-(

<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;}

4

1 回答 1

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
}

The background-image data uri is for a 1px light red image. I generated it with http://dopiaza.org/tools/datauri/index.php An image must be used because the transition requires background-size. I did not vendor prefix the transition, so you will have to add -webkit-, -moz-, etc. accordingly.

于 2013-03-30T22:21:47.383 回答