用onMouseOver顯示圖像，圖像在li-tag之外

我之前完成了這個工作，但是這一次我不得不將圖像移動到li-tag之外，以便定位成我想要的樣子。這就是我的HTML代碼的外觀，對於每個'實習'我想有相應的'voorbeeld'顯示懸停。用onMouseOver顯示圖像，圖像在li-tag之外

<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'函數，但是我無法使其工作。任何提示/提示？提前致謝！

來源

2013-10-21 NaNtastic

你使用的是jQuery還是純javascript？ –

提示1：您的當前html無效，因爲您在多個元素上重複了相同的「id」。 'id'應該是唯一的。技巧2：一個選項（不一定是最好的）是爲每個可以懸停的項目添加一個屬性，如'data-img =「idofimagehere」'，指定要顯示的img的id，然後在鼠標懸停該項目檢索該屬性... – nnnnnn

哦，是啊我是多麼愚蠢！而我使用普通的JavaScript – NaNtastic

這個怎麼樣？

<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-21 21:08:25 Sebsemillia

你先生，真是太棒了:)這將幫助很多！ – NaNtastic

很高興我能幫到你。如果您想了解更多信息，您應該閱讀「數據屬性」和「懸停」功能。 – Sebsemillia

用onMouseOver顯示圖像，圖像在li-tag之外

回答

相關問題