美文网首页
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