时间戳

首页 > 解决方案 > 如何使图像出现在链接悬停

css - 如何使图像出现在链接悬停

问题描述

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

现在的情况

    <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 标签内，但不知道如何使这项工作

有什么建议么？谢谢

标签： css

解决方案

通用兄弟组合器~

A GSC：~意味着右侧的~任何内容都遵循左侧的任何内容，~样式应用于右侧。

例子

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

如果您将鼠标悬停在上面，.A那么后面的任何嵌套.B并在其中.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
}
<main>
<div class='item l1'><a href='#/'>ONE</a></div>
<div class='item l2'><a href='#/'>TWO</a></div>
<div class='item l3'><a href='#/'>THREE</a></div>


<figure>
  <img src='https://cdn1.wine-searcher.net/images/labels/27/50/finca-bacara-time-waits-for-no-one-jumilla-spain-11002750t.jpg' class='one'>
  <img src='https://static1.squarespace.com/static/53221edce4b0ff54eacdae95/53253064e4b0ba32c23fc68c/53253085e4b05db45c4abdda/1395030141683/Table+for+Two15X30.jpg?format=100w' class='two'>
  <img src='http://th06.deviantart.net/fs71/200H/i/2013/037/1/9/under_the_three_moons_by_timidemerald-d5u03xr.jpg' class='three'>
</figure>
</main>

推荐阅读