javascript - 将鼠标悬停在一个 div 容器中的图像上以使 img 或背景出现在不同容器中或上方

Question

因此，就编码而言，我是相当新的，所以大家都知道。我正在尝试同时完成两件事

1.第一个是，我希望能够将鼠标悬停在一个容器中的图像上，并显示另一个容器中的图像。即使这意味着图像在技术上与容器重叠并且恰好具有相同的尺寸(顺便说一下，宽度为 350 像素，高度为 205 像素)。如果另一个解决方案是让初始图像成为可点击链接以打开第二个图像，那也很好。事实上，那会更可取。

2. 我需要多次执行此操作，每次都有不同的初始图像和次要图像，使用 float:right 或类似的 css 函数，涉及将初始图像集设置在我的第一个 div 的右侧容器。

3.我需要在两行中维护一组初始图像(按钮)，其中包含 overlap-y: hidden 和 overlap-x: scroll。

我的按钮图像的 css 是这样的，并且必须保持这种方式或具有类似的效果:

    div.img {
         margin: 10px;
         **padding: 5px;**
         **height: 38px;**
         **width: 38px;**
         float: right;
         display:inline;}   

             div.img img {
                  **height: 38px**
                  **width: 38px**
                  display: inline;
                  float:right;
                  margin: 10px;
                  **border: 12px solid #ffffff;**
                  **border-radius: 8px;**
                  **box-shadow: 3px 3px 1px #888888;**

我将需要保留(或以类似方式显示)的 css 的所有关键点都用粗体显示。有问题的部分是显示:内联函数。我需要我的一组图像成两行，环绕到容器的右侧(或至少水平滚动)，但它们显示为两行，每行三行，然后是一个不再与两排三排。

要查看我正在寻找的解决方案类型，请访问以下页面:

http://hellothisismelody.tumblr.com/codeconstruction/

如您所见，它的设置类似于任天堂 3DS。我希望在底部屏幕上制作功能按钮，使图像出现在顶部屏幕中，并希望将这些图像设置为 Nintendo 3DS 的主屏幕，如下所示:

Click for Nintendo 3DS Homescreen

感谢您的宝贵时间。

Answer 1

关于你的第一个问题，你可以使用这个:

<div class=container1>
    <img src='blah1.png'>
</div>

<div class=container2>
    <img src='blah2.png'>
</div>

$('.container1 img').hover(function() {
    $('.container2 img').get(0).src = 'blah3.png';
});