07前端交互实战：鼠标点击换图与悬停显示二维码的精彩实现

目录

【案例】鼠标单击缩略图展示对应产品图片

【案例】鼠标悬停显示二维码

---

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

07前端交互实战：鼠标点击换图与悬停显示二维码的精彩实现

【案例】鼠标单击缩略图展示对应产品图片

---

          以下是一个简单的图片切换功能，用户点击缩略图时，大图区域会显示对应的大图，截图如下：

        示例代码如下：

        css部分:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    img{
        border:0;
        vertical-align: top;
    }
    ul{
        list-style:none;
    }
    .mp{
        width: 465px;
        height: 465px;
        border:1px solid #ccc;
        border-bottom: none;
        margin:20px 20px 0;
        background-color: #fff;
    }
    .mpnav{
        width: 465px;
        height: 85px;
        border:1px solid #ccc;
        margin:0 20px;
        background-color: #fff;
    }
    .mpnav ul{
        overflow: hidden;
    }
    .mpnav li{
        float: left;
        margin:3px 0 5px 15px;
    }
    .mpnav img{
        display:block;
    }
</style>

        分析：<