Question

效果可以在Webdesignerdepot.com现场看到。当您将鼠标悬停在帖子的标题上时，标题会在动画完成之前从标题中删除光标时逐渐突出显示，高亮显示会回滚到其原始状态。

我尝试了动画背景颜色，但我遇到的问题是背景颜色扩展了整个div，即使文本没有完全填充div。

我一直在考虑添加一个额外的div，其z-index小于文本的z-index，然后设置其宽度的动画，但它会失败，因为文本可以扩展多行。如果使用相同的过程实现所产生的效果，将导致多个div使得程序非常复杂。我无法想到实现这一目标的任何其他方式。我可以使用的任何其他解决方法/技巧？

Answer 1

使用javascript控制台或firebug或类似的东西，它很容易获得网站样式。

CSS

a {
  background-size: 200.22% auto;
  -webkit-background-size: 200.22% auto;
  -moz-background-size: 200.22% auto;
  background-position: -0% 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
  transition: background-position 0.5s ease-out;
  -webkit-transition: background-position 0.5s ease-out;
}

a:hover {
  background-position: -99.99% 0;
}

HTML

<a>something</a>

如何使用jquery / js / css逐步突出显示一块文本

1 个答案: