Hover on certain text, display a picture

Question

I've got some HTML code here

<li class="linamegroup"><a href="#top(1)">Alternator</a></li>
<li class="linamegroup"><a href="#top(2)">Krmilnik alternatorja (regler)</a></li>
<li class="linamegroup"><a href="#top(3)">Prosti tek alternatorja</a></li>

Now I would like to write a JS function that would look for the linamegroup class and its innertext values (Altenator,Krmilnik,Prosti..) So if anyone would hover the world Altenator a picture would be displayed. If you would hover krmilnik .. a different picture would be displayed.... is that possible?

possible duplicate of [how do you add an image to a jquery tooltip](http://stackoverflow.com/questions/15274123/how-do-you-add-an-image-to-a-jquery-tooltip) — Peter Brittain, Aug 31 '15 at 08:55

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

You can create a hidden div for each element and show it on hover.

See this solution, it might help you:
https://stackoverflow.com/a/5210074/1039488

Also see this one:
https://stackoverflow.com/a/15274658/1039488

edited May 23 '17 at 12:14

Community

1
1

answered Aug 31 '15 at 08:27

guyaloni

4,972
5
52
92

Piotr Czarnecki · Accepted Answer · 2015-08-31T08:20:10.043

So in general you can get you anchor text like this:

var text;
$('.linamegroup > a').on('mouseenter', function(){
    text = $(this).text();
});

Hovewer in the scenario which you described (displaying specific image based on hovered link) the better approach would be basing on not text but also add some specific attribute to the anchor tag or some class, and do the same on img or img container something like this:

<li class="linamegroup"><a href="#top(1)" data-img='alternator'>Alternator</a></li>

<div data-img="alternator"><img alt="Alternator" src="~/images/alternator.png" /></div>

For me that approach would be better and of course I would avoid white spaces in the attribute values.

@Ales so if it was helpful you can accept the answer. – Piotr Czarnecki Aug 31 '15 at 08:34 — Piotr Czarnecki, Aug 31 '15 at 08:34

score 0 · Answer 3 · answered Aug 31 '15 at 08:36

Run the code snippet so see an css answer:

.image-container {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid cornflowerblue;
  display: inline-block;
}
.image-container .headline {
  font-weight: bolder;
}
.image-container .headline ~ img {
  display: none;
}
.image-container .headline:hover ~ img {
  display: block;
}

<p>You can create this using css only
  <br/>Here is an example:</p>
<div class="image-container">
  <a class="headline">Your hover text here</a>
  <img src="http://rmfr-colorado.org/userfiles/704/images/kittens.jpg" />
</div>

How does it work?
In the css.

.image-container .headline ~ img

This selects first these classes: the .image-container, then its .headline then the ~ is a sibling selector. So its selects all the <img> tags that are next to the <a> tag.

So this:

.image-container .headline ~ img {
  display: none;
}

hides the image so its not displayed.
And this:

.image-container .headline:hover ~ img {
  display: block;
}

Displays the image when you hover the image.

More fancy animation:

.image-container {
  padding: 5px;
  border-radius: 5px;
  border: 2px solid cornflowerblue;
  display: inline-block;
}
.image-container .headline {
  font-weight: bolder;
  position: absolute;
}
.image-container .headline ~ img {
  position: relative;
  top: 1em;
  transition: transform 1s;
  transform: scale(0);
}
.image-container .headline:hover ~ img {
  transform: scale(1);
}

<p>You can create this using css only
  <br/>Here is an example:</p>
<div class="image-container">
  <a class="headline">Your hover text here</a>
  <img src="http://rmfr-colorado.org/userfiles/704/images/kittens.jpg" />
</div>

Hover on certain text, display a picture

3 Answers3