web-dev-qa-db-fra.com

Afficher l'image sur le lien texte Hover CSS uniquement

J'ai un lien texte. Lorsque l'utilisateur survole le lien texte, je souhaite qu'une image soit affichée ailleurs sur la page. Je veux le faire en utilisant css. Je pensais que cela pourrait être fait simplement avec une seule ligne de code dans le lien comme un onmouseover mais il semble que cela nécessite un autre code ailleurs sur la page.

J'ai essayé d'utiliser l'a: hover avec l'image que je veux montrer comme image d'arrière-plan mais je ne pense pas qu'elle puisse être manipulée pour s'afficher en entier au lieu d'être réduite à la taille du lien texte.

Je vois des centaines de résultats lorsque j'essaie de rechercher cela, mais aucun d'eux n'est ce que je veux. La chose la plus proche que j'ai trouvée était la suivante.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Mais cela fonctionne avec le survol des images miniatures. Je veux juste que l'utilisateur survole un seul lien de texte pour voir une image ailleurs sur la page. J'ai trouvé cette galerie de ce fil: Pop up image css link on hover

Je ne veux pas traiter ce que jquery est ou trop de scripts parce que je connais mieux css. Est-ce que quelqu'un connaît un moyen simple de le faire ou n'y a-t-il toujours aucun moyen, même avec toutes les modifications apportées pour css3?

Merci!

cssimagehyperlinkhoveronmouseover
15
user1418023

CSS ne sera pas en mesure d'appeler d'autres éléments comme ça, vous devrez utiliser JavaScript pour atteindre au-delà d'un sélecteur enfant ou frère.

Vous pouvez essayer quelque chose comme ceci:

<a>Some Link
<div><img src="/you/image" /></div>
</a>

puis...

a>div { display: none; }
a:hover>div { display: block; }
19
Fluidbyte

Cela peut être fait en utilisant CSS seul. Il fonctionne parfaitement sur ma machine dans Firefox, Chrome et Opera sous Ubuntu 12.04).

CSS:

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

HTML:

<div class="hover_img">
     <a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>
24
Naveen Web Solutions

ajouter

.hover_img a:hover span {
    display: block;
    width: 350px;
}

pour afficher l'image en survol en taille réelle dans le tableau, modifiez 350 à votre taille.

1
gta6cheats.club

De écoles w :

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <img src="/pathtoimage" class="tooltiptext">
</div>

Cela ressemble à ce que vous voulez

1
Ian Gardner