0

我以前做过，但这次我不得不将图像移到 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 来做，但我真的不知道怎么做。有没有人有一个链接到一个解释这个的网站？因为我认为完成整个项目太难了。或者也许只是我应该寻找的提示。

到目前为止，我一直在尝试“onmouseover”功能，但我无法让它工作。任何提示/提示？提前致谢！

4

1 回答 1

0

这个怎么样？

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

jQuery：

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

jsfiddle

那是你想要完成的吗？

于 2013-10-21T21:08:25.067 回答