美文网首页
jQuery hover事件改变背景 文字颜色和 图片

jQuery hover事件改变背景 文字颜色和 图片

作者: 曹锦花 | 来源:发表于2019-07-25 14:09 被阅读0次

方法一

    $(".card ul li").hover(function () {
        $(this).find('.top').css('background', "#0B94DE");
        $(this).find('.top img').attr('src', './images/index/icon1' + $(this).index() + '.png')
        $(this).find('p').css('color', "#fff");
        $(this).find('.bottom img').attr('src', './images/index/icon3' + $(this).index() + '.png')
    }, function () {
        $(this).find('.top').css('background', "#F2F2F2")
        $(this).find('.top img').attr('src', './images/index/icon' + $(this).index() + '.png')
        $(this).find('p.first').css('color', "#000");
        $(this).find('p:last-child').css('color', "#999");
        $(this).find('.bottom img').attr('src', './images/index/icon2' + $(this).index() + '.png')
    })

方法二

        $(".card ul li").hover(function () {
            $(this).find('.top').addClass("current");
            $(this).find('p').addClass("current");
            $(this).find('.top img').replaceWith('<img src="./images/index/icon1'+ $(this).index() + '.png" alt="">');
            $(this).find('.bottom img').replaceWith('<img src="./images/index/icon3'+ $(this).index() + '.png" alt="">');
        },function(){
            $(this).find('.top').removeClass("current");
            $(this).find('p').removeClass("current");
            $(this).find('.top img').replaceWith('<img src="./images/index/icon'+ $(this).index() + '.png" alt="">');
            $(this).find('.bottom img').replaceWith('<img src="./images/index/icon2'+ $(this).index() + '.png" alt="">');
        })

相关文章

网友评论

      本文标题:jQuery hover事件改变背景 文字颜色和 图片

      本文链接:https://www.haomeiwen.com/subject/whkhrctx.html