0

好的，我正在尝试创建一个 script.js 来制作图像按钮，但代码不想运行！你能告诉我有什么问题吗？

HTML： 

    <div class="baixo-tudo">
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">http://www.midnightbsd.org/art/logo/MidnightBSDLogo32x32.png</span>
            <span class="src2">http://www.parmaja.com/projects/firebirdlogo/logo-32x32.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-visual-out.png</span>
            <span class="src2">./images/bto-visual-over.png</span>
        </div>
        <div class="botao">
            <img src="./images/bto-net-out.png" />
            <span class="src1">./images/bto-sql-out.png</span>
            <span class="src2">./images/bto-sql-over.png</span>
        </div>
    </div>

</div>

脚本.js：

 $('.baixo-tudo').find('.botao').each(function (i) {

    var imge = $('img');
    var t = $('.botao'),
        src1 = t.find('.src1').text(),
        src2 = t.find('.src2').text();

    imge.mouseover(function () {
        t.attr('src', src1);
    }, function () {
        t.attr('src', src2);
    });
});

看：http: //jsfiddle.net/NnUe6/

许多神经元发射来创建这个 =/

现在看，图像消失了：http: //jsfiddle.net/NnUe6/4/

4

3 回答 3

1

您可以尝试将其放入 document.ready 调用中。正如 Samuel Reid 所指出的，悬停功能是您所需要的。像这样：

$(document).ready(function () {
    $('.baixo-tudo').find('.botao').each(function (i) {

        var imge = $('img');
        var t = $('.botao'),
            src1 = t.find('.src1').text(),
            src2 = t.find('.src2').text();

        imge.hover(function () {
            t.attr('src', src1);
        }, function () {
            t.attr('src', src2);
        });
    });
});

编辑，建立在你的小提琴上。

我猜这就是你想要的？

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.mouseover(function () {
        imge.attr('src', src1);
    });

    imge.mouseout(function () {
        imge.attr('src', src2);
    });
});

甚至更短。

$('.baixo-tudo').find('.botao').each(function (i) {

    var t = $(this),
        imge = t.children("img"),
        src1 = t.children('.src1').text(),
        src2 = t.children('.src2').text();

    imge.hover(function () {
        imge.attr('src', src1);
    }, function () {
        imge.attr('src', src2);
    });
});
于 2013-08-01T19:35:53.253 回答
1

这里有你需要的

$('.baixo-tudo').find('.botao').each(function (i) {


    var imge = $(this).find('img');
    var src1 = $(this).find('span.src1').text();

    imge.hover(function(){
        $(this).attr('src',src1);

    });

});

根据您的需要进行调整。我还编辑了你的小提琴。它可以按您的需要工作。

http://jsfiddle.net/NnUe6/7/

于 2013-08-01T19:47:12.277 回答
0

尝试将您的mouseover功能更改为hover。

于 2013-08-01T19:29:59.867 回答