gpt4 book ai didi

javascript - 在鼠标悬停在表格元素上时显示图像

转载 作者:太空宇宙 更新时间:2023-11-04 03:40:10 25 4
gpt4 key购买 nike

我有一张我最喜欢的电影表。当用户将鼠标悬停在电影名称上时,我想显示电影的海报。我设法为一个元素做到了:

<body>
<h2> My Top 10 Movies </h2>
<table>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
<tr>
<td>01</td>
<td onmouseover="imageAppear()" onmouseout="imageDisappear()">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
</table>

<script>
function imageAppear() {
document.getElementById('place-holder-1').style.visibility = "visible";}

function imageDisappear() {
document.getElementById('place-holder-1').style.visibility = "hidden";}

</script>
</body>

我的问题是,如何在不为每部电影编写 X 函数的情况下对多个元素执行相同的操作?我尝试使用类,但它似乎不起作用(即使它起作用,当用户将鼠标悬停在任何标题上时它也会显示所有图片)。

最佳答案

您可以将元素的 id 作为函数的参数:

    <script>
function imageAppear(id) {
document.getElementById(id).style.visibility = "visible";}

function imageDisappear(id) {
document.getElementById(id).style.visibility = "hidden";}

</script>

在你的表中调用它:

    <table>
<tr>
<th>Rank</th>
<th>Title</th>
<th>Director</th>
<th>Year</th>
</tr>
<tr>
<td>01</td>
<td onmouseover="imageAppear('place-holder-1')" onmouseout="imageDisappear('place-holder-1')">Drive<img src="http://upload.wikimedia.org/wikipedia/en/1/13/Drive2011Poster.jpg" id="place-holder-1" style="zindex: 100; position: absolute; visibility: hidden;"/></td>
<td>Nicolas Winding Refn</td>
<td>2011</td>
</tr>
</table>

关于javascript - 在鼠标悬停在表格元素上时显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25012153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com