带有淡入淡出和文本的jQuery鼠标悬停

Question

首先我必须说我没有任何编码经验，但会尝试解释我想要实现的目标。

我有以下带有 2 张图像的代码...blue.png 是彩色图像 bluebw.png 是相同的黑白图像。代码只是在鼠标悬停时更改图像。

<script  type='text/javascript'>
$(document).ready(function(){
    $(".blue").hover(function() {
        $(this).attr("src","files/blue.png");
            }, function() {
        $(this).attr("src","files/bluebw.png");
    });
});
</script>

<a href="page-1.html">
<img src="files/bluebw.png" alt="dresses" class="blue" height="300" width="170" />

我想做的是：

• 在鼠标悬停时添加 2 个图像的淡入/淡出选项（快/慢/或无）

• 在鼠标悬停时添加显示文本，并在图像消失后在鼠标悬停时淡入/淡出（快/慢/或无），格式化文本（字体/对齐/上下中心/背景/不透明度）

我真的在黑暗中飞翔 :) 任何帮助将不胜感激。

干杯

Answer 1

试试这个：

假设你有一个这样的 HTML 结构：

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

和CSS：

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery 代码：

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

Here is a fiddle 用于演示

或者你可以使用 css3 过渡：

Here is a fiddle 使用 css3 和 jQuery.hover 作为 ie 的后备