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

Question

我在这里有一些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>

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

Answer 1

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

请参阅此解决方案，它可能会对您有所帮助：

另见这一个：
https://stackoverflow.com/a/5210074/1039488

Answer 2

所以一般来说你可以得到这样的锚文本：

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

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>

对我而言，这种方法会更好，当然我会避免在属性值中使用空格。

Answer 3

运行代码段，以便查看css答案：

float assumedCellHeight = 44;
float hh = self.tableView.bounds.size.height;
int num = (hh / assumedCellHeight)/2;

num = (num % 2 == 0)?num:num-1;

float yy = assumedCellHeight*num;

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, yy, self.tableView.bounds.size.width, assumedCellHeight)];
// label.center = self.tableView.center;
label.textAlignment = NSTextAlignmentCenter;
label.text=NSLocalizedString(@"Network Not Reachable", nil);
[self.tableView addSubview:label];

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

它是如何工作的？
在css。

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

首先选择这些类：.image-container，然后是.headline，然后 〜 是兄弟选择器。因此，它会选择.image-container .headline ~ img 标记旁边的所有<img>标记。

所以这个：

<a>

隐藏图像，使其不显示 这个：

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

悬停图像时显示图像。

更精彩的动画：

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

.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);
}