javascript - 在不同表格中悬停时更改多个图像

Question

我正在尝试将一个表中的图像链接到另一个表中的另一个(更大的)图像

基本上我有左右两张 table 。在左表中，我有两个小图像。在右表我什么都没有。我希望能够将鼠标悬停在左表中的小图像上，并在右表中看到较大的对应图像。

我想出了如何使用 html/css 交换同一个表中的两个图像，但无法弄清楚如何实现我上面描述的功能。

任何 CSS 或 HTML 的建议都很好，

非常感谢，

安东

附言我是 CSS 初学者

Answer 1

嗯.. 在 javascript 中有一种简单的方法可以做到这一点。所以 javascript 很简单。

您的 html(这显然不是您的，但它是一个场景)

<div class='right'>
    <div class='img'>
        <img id='1' src='img1-small.png'>
    </div>
    <div class='img'>
        <img id='2' src='img2-small.png'>
    </div>
    <div class='img'>
        <img id='3' src='img3-small.png'>
    </div>
</div>
<div class='left'>
    <div class='img ui-helper-hidden'>
        <img id='1' src='img1-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='2' src='img2-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='3' src='img3-large.png'>
    </div>
</div>

现在我假设你有 jQuery(抱歉，如果你没有，但想法是相似的)。

$(function() {
        $('.right .img').hover(
        //over
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeIn(200);
        },
        //out
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeOut(200);
        }
    )
});