如何仅用HTML和CSS实现鼠标悬停时在页面其他位置显示大图

需要实现的功能：鼠标悬停在页面侧边的小图片上时，在页面左侧区域显示对应的大图，仅使用HTML和CSS完成。之前尝试在网格指定区域放置透明图片副本，但无法覆盖在文字上方，未找到可行方案。

效果展示 #

• 未悬停状态：
• 悬停状态：

当前代码 #

HTML代码 #

<section id="fav-place" class="place-sec">
    <article class="place-art">
        <div class="place-desc">
            <h1>A place I Enjoyed visiting</h1>
            <h2 class="sec-h2">Cape Greco, Cyprus</h2>
            <p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
                 According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
            </p>
            
            <p>
                In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving. 
                Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
                 These caves, along with Smugglers caves, are accessible only by the sea.
            </p>
        </div>
        

        <div class="why-i-like-place">
            <h2>Why I like this place</h2>
            <p>Because of the clear water, the cliffs around and the beautiful sights</p>
        </div>
    </article>

    <aside class="place-aside">
        <img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">                
        <img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">                   
        <img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">                   
        <img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
        <img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
        <img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
        <img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
        
    </aside>    
</section>

CSS代码 #

.place-art {
    grid-column: 1/2;
    display: grid;
    grid-template-rows: 3fr 1fr;
}

.place-desc-sec{
    grid-row: 1/-2;
}

.place-aside {
    border: solid 0.5vh;
    border-color: rgba(185, 218, 100, 0.862);
    border-radius: 1vh;
    margin-top: 6vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.place-sec {
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.first-last-img {
    margin: 0;
}

.p-sm-img {
    margin: 0.2vh 0;
    width: 23.5vw;
    
}

.p-sm-img:hover {
    
}

.p-lrg-img {
    visibility: hidden;
    opacity: 0.2;
    grid-row: 1/-2;
    grid-column: 1/2;
}

.why-i-like-place {
    grid-row: 2/3;
    grid-column: 1/2
    
}

解决方案 #

核心思路是将大图放在左侧文字区域内，默认隐藏，通过CSS结构选择器和定位实现小图hover时对应大图显示，并确保大图能覆盖在文字上方。

修改后的HTML代码 #

在.place-desc内添加大图容器，每个大图与侧边小图一一对应：

<section id="fav-place" class="place-sec">
    <article class="place-art">
        <div class="place-desc">
            <h1>A place I Enjoyed visiting</h1>
            <h2 class="sec-h2">Cape Greco, Cyprus</h2>
            <p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
                 According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
            </p>
            
            <p>
                In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving. 
                Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
                 These caves, along with Smugglers caves, are accessible only by the sea.
            </p>
            <!-- 大图容器 -->
            <div class="large-img-container">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-large">
                <img class="p-lrg-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-large">
            </div>
        </div>
        

        <div class="why-i-like-place">
            <h2>Why I like this place</h2>
            <p>Because of the clear water, the cliffs around and the beautiful sights</p>
        </div>
    </article>

    <aside class="place-aside">
        <img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">                
        <img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">                   
        <img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">                   
        <img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
        <img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
        <img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
        <img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
        
    </aside>    
</section>

修改后的CSS代码 #

.place-art {
    grid-column: 1/2;
    display: grid;
    grid-template-rows: 3fr 1fr;
    position: relative;
}

.place-desc {
    position: relative;
    z-index: 1;
}

/* 大图容器绝对定位，覆盖整个文字区域 */
.large-img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.p-lrg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.place-aside {
    border: solid 0.5vh;
    border-color: rgba(185, 218, 100, 0.862);
    border-radius: 1vh;
    margin-top: 6vh;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.place-sec {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.first-last-img {
    margin: 0;
}

.p-sm-img {
    margin: 0.2vh 0;
    width: 23.5vw;
    cursor: pointer;
}

/* 小图hover时对应显示大图 */
.place-aside .p-sm-img:nth-of-type(1):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(1),
.place-aside .p-sm-img:nth-of-type(2):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(2),
.place-aside .p-sm-img:nth-of-type(3):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(3),
.place-aside .p-sm-img:nth-of-type(4):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(4),
.place-aside .p-sm-img:nth-of-type(5):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(5),
.place-aside .p-sm-img:nth-of-type(6):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(6),
.place-aside .p-sm-img:nth-of-type(7):hover ~ .place-art .large-img-container .p-lrg-img:nth-of-type(7) {
    opacity: 0.8;
    visibility: visible;
}

.why-i-like-place {
    grid-row: 2/3;
    grid-column: 1/2;
    z-index: 3;
}

关键说明 #

1. 层级控制：通过z-index确保大图显示在文字上方，同时下方的why-i-like-place区域不受遮挡。
2. 结构选择器联动：使用:nth-of-type选择器实现小图与大图的一一对应，无需JavaScript。
3. 过渡动画：添加transition属性让大图的显示/隐藏过程更平滑自然。

内容的提问来源于stack exchange，提问作者user18439551