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

Answer 2

我认为你可以用JavaScript访问伪造的类。

但是，如果您将该选择器更改为也包含.sendB.hover，则可以使用jQuery选择它。

要知道的是，您无法淡化背景图像。您需要使用背景图像淡化实际图像或内部元素。你需要使用绝对定位。

将Fadein添加到现有CSS以进行鼠标悬停链接

2 个答案: