使用鼠标悬停显示图像，图像位于 li-tag 之外

Show image with onMouseOver, with image being outside of li-tag

本文关键字：图像 li-tag 之外 显示图 鼠标 悬停 显示      更新时间：2023-09-26

我以前做过这个，但这次我不得不将图像移动到 li-tag 之外，以便定位成为我想要的样子。这就是我的html代码的样子，对于每个"实习"，我希望在悬停时显示相应的"voorbeeld"。

<ul>
    <li><a id="menuKop" href="">Practicum 1</a></li>
    <li><a id="menuKop" href="">Practicum 2</a></li>
    <li><a id="menuKop" href="">Practicum 3</a></li>
    <li><a id="menuKop" href="">Practicum 4</a></li>
    <li><a id="menuKop" href="">Practicum 5</a></li>
</ul>
....rest of code....
<img id="voorbeeld1" src="Voorbeeld1.jpg" alt="voorbeeld1" />

所以我想在JavaScript中做到这一点，但我真的不知道该怎么做。有没有人有指向解释这一点的网站的链接？因为我认为完成整个项目的要求太多了。或者也许只是我应该寻找的提示。

到目前为止，我一直在尝试"鼠标悬停"功能，但我无法让它工作。有什么提示/提示吗？提前感谢！

这个怎么样？

<ul id="Preview">
    <li><a id="menuKop1" data-image="pic1" href="">Practicum 1</a></li>
    <li><a id="menuKop2" data-image="pic2" href="">Practicum 2</a></li>
</ul>
<img id="pic1" class="hide" src="http://i.imgur.com/vZzIm2t.jpg" alt="voorbeeld1" />
<img id="pic2" class="hide" src="http://i.imgur.com/yQdM1dk.jpg" alt="voorbeeld1" />

j查询：

$(".hide").hide();
$('#Preview a').hover(function() {
    var img = '#'+$(this).data('image');
    $(img).show();
}, function() {
    var img = '#'+$(this).data('image');
    $(img).hide();
} );

斯菲德尔

这是你想要实现的吗？

相关文章：