使用HTML代码完成，当鼠标指针移到下面5张小图片上时，小图片显示红色边框，并且上面的图片位置显示与小图片一样的大图片；当鼠标指针离开小图片时，小图片的边框不显示。

可以使用以下HTML代码实现该功能：

<style>
    .thumbnail {
        border: none;
    }
    .thumbnail:hover {
        border: 2px solid red;
        cursor: pointer;
    }
    .main-image {
        display: none;
        position: absolute;
    }
    .thumbnail:hover + .main-image {
        display: block;
        z-index: 999;
    }
</style>

<img src="thumbnail1.jpg" class="thumbnail" />
<img src="thumbnail2.jpg" class="thumbnail" />
<img src="thumbnail3.jpg" class="thumbnail" />
<img src="thumbnail4.jpg" class="thumbnail" />
<img src="thumbnail5.jpg" class="thumbnail" />

<img src="mainimage1.jpg" class="main-image" />
<img src="mainimage2.jpg" class="main-image" />
<img src="mainimage3.jpg" class="main-image" />
<img src="mainimage4.jpg" class="main-image" />
<img src="mainimage5.jpg" class="main-image" />

简要说明：

- 小图片使用class为“thumbnail”的img标签，大图片使用class为“main-image”的img标签。
- 当鼠标指针移到小图片上时，添加class为“hover”的样式，包括红色边框和手型光标。
- 当鼠标指针离开小图片时，去掉class为“hover”的样式。
- 大图片使用position:absolute定位，初始状态为不显示（display:none）。
- 当鼠标指针位于小图片上方时，利用相邻兄弟选择器“+”选中对应的大图片，将其显示（display:block）。需要注意，相邻兄弟选择器只能选中下一个兄弟元素，如果需要选中上一个兄弟元素，则需要修改HTML结构或使用JavaScript等编程语言实现。