Question

我为每个列表项（家庭，服务和联系人）都有一个精灵图像。我正在使用CSS在悬停时移动位置。它工作正常，除了我想淡化过渡而不是快速移动位置。我试图让它看起来像是在悬停时按下按钮。我想放慢速度。我整天都在这里，没有到达任何地方。谢谢你的帮助！

HTML

<ul id="navigation">
<li class="link1"><a href="index.html">Home</a></li>
<li class="link2"><a href="services.html">Services</a></li>
<li class="link3"><a href="contact.html">Contact</a></li>
</ul>

CSS

li.link1 {
text-indent: -9999px;
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left top;
}
li.link1:hover {
background-image: url(../images/home.png);
background-repeat: no-repeat;
height: 15px;
width: 66px;
background-position: left bottom;   
}
li.link2 {

Repeats itself...

Answer 1

你能用相对定位和CSS3过渡吗？

li.link1 {
    position: relative;
    text-indent: -9999px;
    background-image: url(http://www.rjdesigns.net/temp/images/home.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 66px;

     transition: margin 0.25s;
     -moz-transition: margin 0.25s; /* Firefox 4 */
     -webkit-transition: margin 0.25s; /* Safari and Chrome */
     -o-transition: margin 0.25s; /* Opera */
}

li.link1:hover {
    background-position: left bottom;

    // These lines add height to the top of the li, so it doesn't 
    // glitch/vibrate if you hover on the top pixel or two
    border-top: 2px solid transparent;
    top: -2px;

    // Increase margin by 2px on top and left
    // Decrease by 2px on right so you don't shift other menu items
    margin: 2px -2px 0 22px !important;
}

演示：
http://jsfiddle.net/jtbowden/gP9kD/

使用所有三个链接和li元素的简化CSS更新演示：
http://jsfiddle.net/jtbowden/gP9kD/1/

<强>的jQuery

如果你想要一个真正的fade效果，你可以用jQuery做到这一点。我在这里乱砍了一个例子：

http://jsfiddle.net/jtbowden/gP9kD/4/

此示例创建每个li的克隆更改背景定位，并将它们绝对置于当前li元素下并隐藏它们。然后在悬停时，它将主li淡出（几乎为零，因此它仍然保持活动状态），并在下面的那个中消失。

它有点hacky，因为li克隆仍然包含链接等。但它起作用，并证明了原理。

淡出旧图像并淡入新列表项目导航

1 个答案: