-2

Oi! Eu queria que uma imagem aparecesse quando eu passasse o mouse em cima de um link em HTML...

Aqui, o que eu tenho agora...

<body>
<img src="https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/7/7b/ARK-_Extinction.png?version=64858f8a63faac340a9254a539dc2386" />
    <center><h1>Objetivos</h1></center>
    <ol class="center"> 
    <li>Spawn on <a href="https://ark.gamepedia.com/Sanctuary_(Extinction)" target="_blank" >Sanctuary</a> Central...</li>
    <li>Farm <a href="https://ark.gamepedia.com/Wood" target="_blank" >Wood</a> and <a href="https://ark.gamepedia.com/Stone" >Stone</a>...</li>
    <li>Build a House Lv. 1...</li>
    <li>Craft <a href="https://ark.gamepedia.com/Single_Panel_Flag" target="_blank" >Single Panel Flag</a>...</li>
    <li>Tame a <a href="https://ark.gamepedia.com/Doedicurus" target="_blank" >Doedicurus</a>...</li>
    <li>Craft <a href="https://ark.gamepedia.com/Bola" title=img src="https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/a/ae/Bola.png?version=8877e768ace7aa0e07bb2159d176f571" target="_blank" >Bola</a>...</li>
    <li>Tame a <a href="" >Pterodon</a>...</li>
    <li>Craft <a href="" >Dino Leash</a>...</li>
    <li>Tame a <a href="" >Managarmr</a>...</li>
    <li>Tame a <a href="" >Snow Owl</a>...</li>
    <li>Free Pterodon...</li>
    <li>Craft <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=889745138&searchtext=" >Awesome Teleporter</a>...</li>
    <li>Go to: 45.1, 46.2</li>
    <li>Build a Green House on 45.1, 46.2...</li>
    <li>Tame a <a href="" >Velonasaur</a>...</li>
    <li>Defend a <a href="" >Element Node</a>...</li>
    <li>Craft <a href="" >Cryofridge</a>...</li>
    <li>Craft <a href="" >Cryopods</a>...</li>
    <li>Craft <a href="" >Tek Armor</a>...</li>
    <li>Tame a <a href="" >Thylacoleo</a>...</li>
</ol>

<center><h2>Maybe</h2></center>
<ul class="center">
    <li><a href="" >Tek Bridge</a></li>
    <li><a href="" >Scout Remote</a></li>
</ul>
</body>

Eu queria que quando passasse o mouse em cima do item ou do Dino, aparecesse a foto dele...

Isso é possível? Obrigado pelo seu tempo!

1
  • Cara coloque o que vc já tem de código ai, ou pelo menos o layout que vc está tentando replicar. Da forma como vc perguntou a pergunta fica muito ampla
    – hugocsl
    Commented 26/11/2018 às 22:50

2 Respostas 2

1

É possível sim e essa é uma possibilidade:

a.y:hover {
 width: 256px;
 height: 256px;
 color: #ffffff;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(https://i.pinimg.com/originals/dc/ff/62/dcff629625d17e9c90981c6f07798a80.png);
 background-repeat: no-repeat;
 }
 
 a.z:hover {
 width: 256px;
 height: 256px;
 color: #000000;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(https://i.pinimg.com/originals/8f/d6/d0/8fd6d0e4b94ede5ca1d90c2e32e62b1d.jpg);
 background-repeat: no-repeat;
 }
<ul class="center">
<li><a href="" class="y">Tek Bridge</a></li>
<li><a href="" class="z">Scout Remote</a></li>
</ul>
</body>

coloque uma classe no link e desenvolva o css para essa classe conforme exemplificado nessa resposta

0
-1

Você pode fazer da seguinte forma

.imageSumida {
    display: none;
}
.hoverImage:hover ~ .imageSumida {
    display: block;
}
  <a href="http://google.com" target="_blank" class="hoverImage">Uma imagem deve aparecer. PASSE o MOUSE e descubra</a>
<img src="https://static.imagensparawhats.com.br/content/assetz/uploads/2018/08/memes-imagem-engracada-so-me-falta-o-dinheiro---.png" alt="Serei Rico" class="imageSumida"> 

Sendo a propriedade :hover uma espécie de evento em CSS que é executado quando o elemento anterior aos : tem o mouse passado em cima dele e o ~ como seletor de elementos irmãos, você pode ver mais AQUI

No exemplo que você deu, acredito que se colocar sua lista assim, irá resolver

.imageSumida {
    display: none;
}
.hoverImage:hover ~ .imageSumida {
    display: block;
}
<ol>
  <li>
    <a href="https://google.com" class="hoverImage">A imagem irá aparecer, tenha FÉ</a>
    <img class="imageSumida" src="https://static.imagensparawhats.com.br/content/assetz/uploads/2018/08/memes-imagem-engracada-so-me-falta-o-dinheiro---.png" alt="Serei Rico">
  </li>

  <li>
    <a href="https://google.com" class="hoverImage">Outra imagem irá aparecer</a>
    <img class="imageSumida" src="https://i.etsystatic.com/9828894/d/il/8da85f/637254848/il_340x270.637254848_nxac.jpg?version=1" alt="Serei Rico">
  </li>
</ol>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .