【HTML】- 鼠标悬停图片时切换查看器

1.效果

2.代码实现

2.1 HTML：

<div id="box">
    <img id="showImg" src="../image/image_01.jpg">
    <ul id="list">
        <li><a href="#"><img src="../image/image_01.jpg"></a></li>
        <li><a href="#"><img src="../image/image_02.jpg"></a></li>
        <li><a href="#"><img src="../image/image_03.jpg"></a></li>
        <li><a href="#"><img src="../image/image_04.jpg"></a></li>
        <li><a href="#"><img src="../image/image_05.jpg"></a></li>
    </ul>
</div>

2.2 JS:

 <script>
    var img = document.getElementById("list").getElementsByTagName("img")
    var showImg = document.getElementById("showImg");
    for (var i = 0;i < img.length;i++){
        img[i].onmouseover = function () {
            showImg.src = this.src
        }
        img[i].onmouseout = function () {
        }
    }
</script>

2.3 CSS:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #222222;
    }
    #box{
        width: 500px;
        margin: 20px auto;
        text-align: center;
    }
    #box ul{
        list-style: none;

    }
    #box ul:after{
        content: '';
        height: 0;
        visibility: hidden;
        clear: both;
        display: block;
    }
    #box ul li{
        float: left;
    }
    #box ul li a img{
        width:90px;
        margin: 4px;
    }
    #box ul li a img:hover{
        transform: scale(1.03);
        border: 1px solid #ff6666;
        box-shadow: #ff6666 1px 1px 1px ;
    }
</style>