Question

我以前做过这个，但是这次我不得不将图像移到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'功能，但我无法让它工作。任何提示/提示？提前谢谢！

Answer 1

这个怎么样？

<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

这是你想要完成的吗？

使用onMouseOver显示图像，图像在li-tag之外

1 个答案: