鼠标移入移出切换图片&媒体查询

说明：

1.两张图片 默认展示小图片 鼠标移入展示大图片

2.使用媒体查询 台式机和笔记本两边宽度

3.可以添加transition 使变化更平滑

//布局
<div class="internalPackage">
                            <!-- 默认展示 -->
                            <img class="imgClass small" src=".aiButtonBig.png" alt="" />
                            <img class="imgClass big" src=".aiButtonSmall.png" alt="" />
                        </div>
//样式
.internalPackage {
    position: relative;
    width: 100%;
    height: 90px;
}
.imgClass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    /* transition: opacity 0.3s ease; */
    opacity: 0;
    max-width: 480px;
}

.imgClass.big {
    opacity: 1;
}

.internalPackage:hover .imgClass.big {
    opacity: 0;
}

.internalPackage:hover .imgClass.small {
    opacity: 1;
}
/* 当屏幕宽度小于1200px时应用的样式 */
@media (max-width: 1500px) {
    .imgClass {
        width: 370px;
    }
}