[英]How do I use mouseover (or hover) so that I can display different images when I go over different texts? JAVASCRIPT
I'm currently doing CS50 and I need to write a little html page inserting interactive elements from Javascript.I'm a total beginner with this language and I'm trying to find out how to display an image when I hover on a text.我目前正在做 CS50,我需要编写一个小 html 页面,插入来自 Javascript 的交互式元素。我完全是这种语言的初学者,我正在尝试找出如何在我 ZE0542F579DF58E81238ZADEF9 上显示一个文本时显示图像。 Apparently there's almost zero topic about this on internet, I've only found this,which does work but only with the first image.The reason is because the "id" is the same for all the urls,I get that,but how can I modify the code so that it can work for all the different texts/pictures?I kind of get the whole picture because I know Python but html and Js are brand new to me.Any help would be appreciated,thanks
显然,互联网上关于这个的话题几乎为零,我只发现了这个,它确实有效,但只适用于第一张图片。原因是因为所有网址的“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>
ids have to be unique. id 必须是唯一的。 So you need to find a different way to select the element.
所以你需要找到一种不同的方式来 select 元素。 Since it is a sibling, you can use prev() to select it.
由于它是兄弟,您可以使用 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.