当我将鼠标悬停在分屏左侧的文本上时，如何在屏幕右侧显示图像（分屏）？

Question

我是一个完全的编码新手。我昨天才开始学习 HTML 和 CSS 的基础知识。所以请原谅我的问题，如果它看起来很愚蠢。

我想创建一个分屏，屏幕左侧（白色背景）显示我最喜欢的艺术家的列表。当我将鼠标悬停在一位艺术家的名字上时，我希望他们的作品的 1 张图像出现在屏幕的右侧（红色背景），然后在我移开鼠标指针后消失。当我将鼠标悬停在列表中每个艺术家的名字上时，我希望出现相同的效果。

我还希望艺术家的每个名字都是带有超链接的文本，当我点击它时将我引导到他们的社交媒体页面（虽然我已经弄清楚了，这只是我上面描述的悬停部分'我有问题）。

现在，当我将鼠标悬停在艺术家的名字上时，图片确实会显示，但它只显示在左侧而不是完全显示。如前所述，我希望图片仅显示在右侧，足够大以适合整个右侧而不裁剪图像的任何部分。

我目前的代码如下所示，其中很多都是我从网上各种tutorials/sources复制+粘贴的（可能是乱七八糟的，我不知道怎么说）。

理想情况下，最终结果应该是这样的：https://imgur.com/a/Keo5tHd

有人可以帮忙吗？我很高兴现在学习编码，因为我有一个实际问题想要解决（我正在尝试列出这个清单），这激励我继续寻找解决方案并继续学习。

img{
               display: none
            }

            span:hover + img{
               display: block;
            }


        /* Split the screen in half */
        .split {
          height: 100%;
          width: 70%;
          position: fixed;
          z-index: 1;
          top: 0;
          overflow-x: hidden;
          padding-top: 20px;
        }

        /* Control the left side */
        .left {
          left: -300;
          background-color: #FFFFFF;
          width: 63%;
          height: 20%;
        }

        /* Control the right side */
        .right {
          right: 0;
          background-color: #FF1111;
          
        }

        /* If you want the content centered horizontally and vertically */
        .centered {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: left;
        }

        /* Style the image inside the centered container, if needed */
        .centered img {
          border-radius: 0;
}

<div class="split left">
          <div class="left: centered">
            
            <h2>My favorite artists</h2>
            
                    <a href="https://www.twitter.com/rinotuna" target="_blank"> <span>Artist 1: Rinotuna</span>
                    <img src="https://pbs.twimg.com/media/FIGzZZnakAEV90i?format=jpg&name=small"/><br></a>
                    
                    <a href="https://www.twitter.com/WLOP" target="_blank"> <span>Artist 2: WLOP</span>
                    <img src="https://pbs.twimg.com/media/FKpRYQIVcAMvPlA?format=jpg&name=small"/><br></a>
            
            
          </div>
        </div>

        <div class="split right">
          <div class="centered">
            
            
            
            
            
            
          </div>
        </div>

Answer 1

顺便说一句，这根本不是一个愚蠢的问题，你才刚刚开始学习。首先，我建议您考虑为每个名称和照片使用单独的 <div> 标签，这样您就不会在确定组件位置时遇到麻烦。其次，使用 Flexbox 或 CSS Grid 或 JavaScript 可以创建此 mini-project，而使用简单的 CSS 则变得非常困难。请从更简单的 mini-project 开始。如果我能帮上忙，我很乐意去做。

Answer 2

有多种方法可以实现布局。以下是其中之一。我只使用了基本的 CSS 规则。
要了解它是如何工作的，请搜索 MDN web docs 上的任何 CSS 属性。它是最详尽的开发人员友好文档。

为了更好地理解，请在运行以下代码段之后单击左上角的“完整页面”link。并打开Developer console了解元素。

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main {
  height: 100%;
  width: 100%;
  position: relative;
}

.left {
  padding-left: 1rem;
  width: 30%;
  height: 100%;
  background-color: wheat;
  float: left;
}

.right {
  padding: 1rem;
  float: right;
  width: 70%;
  height: 100%;
  background-color: #FF1111;
}

.right>p {
  margin: 0;
  font-weight: bolder;
  font-size: 1.2rem;
  color: rgb(255, 208, 255);
  writing-mode: vertical-lr;
  text-orientation: upright;
}

img {
  visibility: hidden;
  position: fixed;
  top: 2.5rem;
  right: 10%;
  width: 50vw;
  height: 90vh;
  object-fit: contain;
  z-index: 100;
}

span:hover+img {
  visibility: visible;
}

<main>
  <div class="left">
    <h2>My favorite artists</h2>
    <a href="https://www.twitter.com/rinotuna" target="_blank"> <span>Artist 1: Rinotuna</span>
      <img src="https://pbs.twimg.com/media/FIGzZZnakAEV90i?format=jpg&name=small" /><br></a>
    <a href="https://www.twitter.com/WLOP" target="_blank"> <span>Artist 2: WLOP</span>
      <img src="https://pbs.twimg.com/media/FKpRYQIVcAMvPlA?format=jpg&name=small" /><br></a>
  </div>

  <div class="right">
    <p>Art Gallery</p>
  </div>
</main>

当我将鼠标悬停在分屏左侧的文本上时，如何在屏幕右侧显示图像（分屏）？

How to show an image on the right side of the screen (split screen) when I hover over a text from the left side of the split screen?

html

hover