我如何使用鼠标悬停(或悬停)以便在我浏览不同的文本时可以显示不同的图像? JAVASCRIPT
How do I use mouseover (or hover) so that I can display different images when I go over different texts? JAVASCRIPT
我目前正在做 CS50,我需要写一点 html 页面来插入来自 Javascript.I 的交互元素我是这门语言的初学者,我正在尝试找出如何当我将鼠标悬停在文本上时显示图像。
显然,互联网上关于这个的话题几乎为零,我只发现了这个,它确实有效,但只有第一个 image.The 原因是因为所有 url 的“id”都相同,我明白了,但是我怎样才能修改代码,使其适用于所有不同的 texts/pictures?我了解了整个情况,因为我知道 Python 但 html 和 Js 对 me.Any 将不胜感激,谢谢
<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>
我目前正在做 CS50,我需要写一点 html 页面来插入来自 Javascript.I 的交互元素我是这门语言的初学者,我正在尝试找出如何当我将鼠标悬停在文本上时显示图像。 显然,互联网上关于这个的话题几乎为零,我只发现了这个,它确实有效,但只有第一个 image.The 原因是因为所有 url 的“id”都相同,我明白了,但是我怎样才能修改代码,使其适用于所有不同的 texts/pictures?我了解了整个情况,因为我知道 Python 但 html 和 Js 对 me.Any 将不胜感激,谢谢
<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>