javascript - 为鼠标悬停链接添加 Fadein 到现有 CSS

Question

是否可以将我现有的 css 用于带有背景图像的鼠标悬停链接，并使其淡入淡出？淡入/淡出的最佳方法是什么？我已经在使用 jquery。

.sendB {
    width: 100%;
    height: 125px;
    background: #5266EB url('/img/send.gif') no-repeat 50% 0;
    margin-top: 22px;
    float: left;
}

.sendB:hover {
    width: 100%;
    height: 125px;
    background: #00CE00 url('/img/send.gif') no-repeat 50% -125px;
    margin-top: 22px;
    float: left;
}

Answer 1

jQuery 不能直接淡化背景图像。它必须将不透明度更改应用于整个元素。我过去这样做的方法是在里面嵌套一个元素，给它背景图像，然后淡化整个元素。标记为:

<a class="sendB" href="...">
    <span class="background-image-to-fade"></span>
</a>

一旦你得到了这个，这只是一个问题:

$('.sendB').hover(
    function(){
        $(this).fadeIn();
    },
    function(){
        $(this).fadeOut();
    }
);