[英]How do I make a video swap for a different video when I hover over a thumbnail?
[英]How do I use mouseover (or hover) so that I can display different images when I go over different texts? JAVASCRIPT
我目前正在做 CS50,我需要編寫一個小 html 頁面,插入來自 Javascript 的交互式元素。我完全是這種語言的初學者,我正在嘗試找出如何在我 ZE0542F579DF58E81238ZADEF9 上顯示一個文本時顯示圖像。 顯然,互聯網上關於這個的話題幾乎為零,我只發現了這個,它確實有效,但只適用於第一張圖片。原因是因為所有網址的“id”都是相同的,我明白了,但怎么能我修改了代碼,以便它適用於所有不同的文本/圖片?我有點了解全貌,因為我知道 Python 但 html 和 Js 對我來說是全新的。任何幫助將不勝感激,謝謝
<div>
<table>
<tr>
<th>Best Albums</th>
<th>Year</th>
</tr>
<tr>
<td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp"/> <span>Spreading the disease</span></td>
<td>1985</td>
</tr>
<tr>
<td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp"/> <span>Among the living</span></td>
<td>1987</td>
</tr>
<tr>
<td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp"/> <span>Persistence of time</span></td>
<td>1990</td>
</tr>
<tr>
<td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp"/> <span>Sound of white noise</span></td>
<td>1993</td>
</tr>
<tr>
<td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp"/> <span>We've come for you all</span></td>
<td>2003</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline');
$('#image').show();
},function(){
$(this).removeClass('underline');
$('#image').hide();
});
});</script>
</div>
<br><a href="scott.html"><button type="button">Check them out</button></a><br>
</body>
id 必須是唯一的。 所以你需要找到一種不同的方式來 select 元素。 由於它是兄弟,您可以使用 prev() 到 select 它。
$(document).ready(function() { $('span').hover(function() { $(this).addClass('underline').prev("img").show(); }, function() { $(this).removeClass('underline').prev("img").hide(); }); });
.hidden { display: none; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table> <tr> <th>Best Albums</th> <th>Year</th> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/2Lm375yVwwGyAHfNFP2HU6-970-80.jpg.webp" /> <span>Spreading the disease</span></td> <td>1985</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/jP4Fx9doBk4R27kg5hpsrd-970-80.jpg.webp" /> <span>Among the living</span></td> <td>1987</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/sj49Yj3eJERgwwVbZBZ5nJ-970-80.jpg.webp" /> <span>Persistence of time</span></td> <td>1990</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/BhDq2Bdm7axUP9erRcs5i9-970-80.jpg.webp" /> <span>Sound of white noise</span></td> <td>1993</td> </tr> <tr> <td><img class="hidden" id='image' src="https://cdn.mos.cms.futurecdn.net/fKVNiGMLbFtsXt6uC8aLMm-970-80.jpg.webp" /> <span>We've come for you all</span></td> <td>2003</td> </tr> </table> </div> <br><a href="scott.html"><button type="button">Check them out</button></a><br> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.