Javascript - 悬停时显示/更改图像

Question

我的一侧有一张 table ，右侧有一个图像区域。当表中的一行悬停时，我想要显示不同的图像。最终将有 20 行数据，以及 20 张各自的图像。

我有 JavaScript:

document.getElementById("showlot1").mouseover = function() {
document.getElementById("lot1").style.visibility = "visible"; }

document.getElementById("showlot2").mouseover = function() {
document.getElementById("lot2").style.visibility = "visible"; }

CSS:

#lot1, #lot2 { visibility: hidden; }

HTML 表格:

<table style="width: 100%;" cellpadding="2">
    <tbody>
        <tr class="hover">
            <td style="text-align: center;">
                <a id="showlot1">1</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot1">3.4ha (8.4 acres)</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot1"></a>$99,000</a>
            </td>
        </tr>
        <tr class="hover">
            <td style="text-align: center;">
                <a id="showlot2">2</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot2">3.5ha (8.6 acres)</a>
            </td>
            <td style="text-align: center;">
                <a id="showlot2">$99,000</a>
            </td>
        </tr>
    </tbody>
</table>

HTML 图像放置器:

<img id="lot1" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT1.jpg" />
<img id="lot2" src="/wp-content/uploads/sites/291/2015/02/QA-CONTOUR-LOT2.jpg" />

Answer 1

一种简单的方法是使用 css 来实现。

HTML

<img id="myimg" src="first_image"/>

CSS

#myimg:hover {
    content: url('second_image');
}

请参阅运行 JSFiddle 示例 here