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

的后备

jquery mouseover与淡入淡出和文本

1 个答案: