将鼠标悬停在某些文字上，即可显示图片

I've got some HTML code here

我这里有一些HTML代码

<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?

现在我想编写一个JS函数来查找linamegroup类及其innertext值（Altenator，Krmilnik，Prosti ..）因此，如果有人在世界上徘徊Altenator，将会显示一张图片。如果你将悬停krmilnik ..将显示一张不同的图片....这可能吗？

3 个解决方案

#1

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:

Hovewer在您描述的场景中（基于悬停链接显示特定图像）更好的方法是基于非文本而且还为锚标记或某些类添加一些特定属性，并在img或img容器上执行相同操作这个：

<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.

对我来说，这种方法会更好，当然我会避免属性值中的空格。

#2

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

您可以为每个元素创建一个隐藏的div，并在悬停时显示它。

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

看到这个解决方案，它可能对您有所帮助：https：//*.com/a/5210074/1039488

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

另见这一个：https：//*.com/a/15274658/1039488

#3

Run the code snippet so see an css answer:

运行代码段，看看css答案：

.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.

它是如何工作的？在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.

这首先选择这些类：.image-container，然后是.headline，然后〜是兄弟选择器。因此，它选择标签旁边的所有将鼠标悬停在某些文字上，即可显示图片标签。

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>

#1