2

在这里，如果您将鼠标悬停在页脚中的任何链接（即“书架”链接）上，您会得到一点点向左移动的火花效果。

我尝试使用萤火虫，但无法弄清楚这是如何实现的。

假设我认为始终显示的白色边框 (?) 是一个单父 div，而触发 div 是其中的单个 div。然后当鼠标悬停发生时，jquery 应该被用来为子 div 应用背景颜色或边框左序。即使这样，也会出现这样的情况，即这些子 div 使父 div 的高度大于子 div 的高度，这与 url 中明显的相反。

对于测试场景，我使用了一个父 div ( class_1) 和一个子 div ( class_2) 而不是很多：html：

<div class="class_1">
<div class="class_2"></div><!--end of class_2 -->

</div><!-- end of class class_1 -->

CSS：

.class_1{
height111:1px;

width:150px;
margin:0 auto;

border:2px solid red;


}
.class_2{

width:70px;
margin:0 auto;
border:1px solid green;


}

正确的方法应该是什么？

4

2 回答 2

2

演示：http: //jsfiddle.net/qYpck/

它仅使用 CSS 实现 - 背景渐变，然后在父a标签的悬停上转换 - background-position 是赋予它火花幻觉的属性。

<ul class="link-list">
  <li><a href="#">Link one<span></span></a></li>
  <li><a href="#">Link two<span></span></a></li>
  <li><a href="#">Link three<span></span></a></li>
</ul>

记下span链接内部的空白。

这是具有魔力的过渡 CSS：（请注意，您需要为transition属性使用浏览器前缀，例如-moz-和-o-- 它们出现在上面的小提琴中，但为了便于阅读和简洁，我在下面省略了它们）

.link-list a:hover>span, .link-list a:focus>span {
    background-position: -100% 0;
    transition: background 0.4s;
}

使用 CSS 进行转换的好处是巨大的——比如：

  • 渐进式增强（闪烁效果对于页面功能来说不是必需的，因此它纯粹是一种美学功能，不会减慢无法识别它的浏览器的速度）

  • CSS 过渡是硬件加速的，通常比 JS 动画更平滑

  • 消除 javascript 引擎的压力

阅读更多：与 jQuery 动画相比，使用 CSS 动画有什么优势吗？（性能或其他）

要检查该技术将支持哪些浏览器，请查看 caniuse.com

于 2012-10-15T07:12:47.593 回答
1 
.link-list a:hover>span, .link-list a:focus>span {
    background-position:-100% 0;
    -webkit-transition:background 0.4s;
   -moz-transition:background 0.4s;
    -o-transition:background 0.4s;
    transition:background 0.4s
}

使用 CSS 过渡效果制作背景动画

于 2012-10-15T07:22:37.823 回答