如何使图像显示在链接悬停上

Question

当我将鼠标悬停在每个链接上时，我试图显示不同的图像

    <div class="wrapper">

    <h1>PROJECTS</h1>

    <ul>
    <li><a href="generation.html">GENERATION ANXIETY</a></li>
    <li><a href="glitterboy.html">GLITTER BOY COSMETICS</a></li>
    <li><a href="untitledhuman.html">UNTITLED HUMAN</a></li>
    <li><a href="bodys.html">BODY(S) UNDER NEGOTIATION</a></li>
    </ul>
    </div>

CSS

ul {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
list-style-type: none;
margin-top: 40;
}

a:hover {
position: relative;
}
a:hover:after {
content: url(Anxiety1%20hover.png); /* no need for qoutes */
position: absolute;
right:0;
}

我觉得这些图像需要放在自己的div中，因为它们恰好位于ul标签中，但不确定如何进行这项工作

有什么建议吗？谢谢

Answer 1

同级组合~

GSC：~表示~右边的内容跟随~左边的内容应用于右边。

示例

  <a href='#/' class='A'>A</a> 
  <section class='B'>
      <article class='C'>C</article>
  </section>     
  .A:hover ~ .B .C {color:red}

     

如果您将鼠标悬停在.A上，则后面跟随且嵌套了.B的{​​{1}}的文字将变为红色。

---

演示

.C

main {
  position:relative;
}

figure {
  position:absolute;
  right:0;
  top:0;
  width:20vw;
  height: 10vh;
}

img {
  display: none;
  opacity: 0.0;
  transition: 0.5s;
  width:100%;
}

.item {
  font-size: 10vh;
  width: 5vw;
  margin: 5vh;
}

.l1:hover~figure .one,
.l2:hover~figure .two,
.l3:hover~figure .three {
  display: block;
  opacity: 1.0;
  transition: 0.5s
}

Answer 2

在这里您可以玩转它。每个链接可以有多个图像，并在悬停时显示

ul {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
  grid-row-end: 2;
  list-style-type: none;
  margin-top: 40;
}

.right {
  float: right;
}

.hidden {
  display: none;
}

a:hover {
  position: relative;
}

a:hover+img {
  display: block;
}

<div class="wrapper">

  <h1>PROJECTS</h1>

  <ul>
    <li>
      <a href="generation.html">GENERATION ANXIETY</a>
      <img class="right hidden" height="200" width="200" src="https://i.imgur.com/0c43ELR.png" />
    </li>
    <li>
      <a href="glitterboy.html">GLITTER BOY COSMETICS</a>
      <img class="right hidden" height="200" width="200" src="https://i.imgur.com/lBXHfud.png" />
    </li>
  </ul>

</div>

Answer 3

尝试使用伪元素:after

a:hover:after {
    content: url(imageURL);
    display: block;
}