Javascript 横幅的鼠标效果

我正在做运动。这是我的界面。现在我想在左边的两个横幅上使用鼠标效果：

当我们在每个横幅上移动鼠标时，该横幅将被一个大小相同、背景为绿色的文本框替换，而不会影响其他横幅，如下所示

我知道我们可以用javascript实现这种效果，但因为我正在学习html，javascript对我来说并不容易，你们能帮我举个例子吗？这是我的代码：

母公司{ 溢出：隐藏； 边际：0px； } .对{ 左边框：2倍实心； 边框颜色：RGB215217216； 左侧填充：20px； 浮动：对； 宽度：270px； } .左{ 边际：0px； 溢出：隐藏； 身高：100%； } 身体{ 边际：0px； 字体系列：Calibri； } 校长20{ 字号：16pt； } 内{ 左边距：10px； 宽度：730px； 保证金：0自动； } .行{ 显示：flex；/*子对象的等高*/ } 这是第一张桌子 第一点 第二点 第三点 这是第二张桌子 第一点 第二点 第三点

这是页面的标题-下个月的日程安排

内容的第一行

内容的第二行

内容的第三行

---

我为您制作了一个JSBin，它展示了如何解决这个问题。该解决方案只需要CSS，不需要JavaScript！你可以在这里看到：

以下是解决问题的步骤：

将图像包装在div中 添加另一个包含文本的div 隐藏内部div 在悬停状态下显示innter div

---

我为您制作了一个JSBin，它展示了如何解决这个问题。该解决方案只需要CSS，不需要JavaScript！你可以在这里看到：

以下是解决问题的步骤：

将图像包装在div中 添加另一个包含文本的div 隐藏内部div 在悬停状态下显示innter div

---

因为这是一个练习，我只想给你一点提示： 包装横幅和隐藏的文本框。悬停包装器时，只需隐藏横幅并显示文本框

如果您懒得尝试，这里有一个简单的解决方案：

.切换器{ 宽度：250px； 高度：50px； } .switcher>img{ 显示：块； } .切换开关：悬停>img{ 显示：无； } .switcher>.switch文本{ 显示：无； 宽度：100%； 身高：100%； 背景色：RGB2111238208； } .switcher:hover>.switch文本{ 显示：块； } 母公司{ 溢出：隐藏； 边际：0px； } .对{ 左边框：2倍实心； 边框颜色：rgb215、217、216； 左侧填充：20px； 浮动：对； 宽度：270px； } .左{ 边际：0px； 溢出：隐藏； 身高：100%； } 身体{ 边际：0px； 字体系列：Calibri； } 校长20{ 字号：16pt； } 内在的{ 左边距：10px； 宽度：730px； 保证金：0自动； } .行{ 显示器：flex； /*孩子们的身高相等*/ } 这里有一些文字 这里有一些文字 这是一张桌子 第一点 第二点 第三点 这是另一张桌子 第一点 第二点 第三点

---

因为这是一个练习，我只想给你一点提示： 包装横幅和隐藏的文本框。悬停包装器时，只需隐藏横幅并显示文本框

如果您懒得尝试，这里有一个简单的解决方案：

.切换器{ 宽度：250px； 高度：50px； } .switcher>img{ 显示：块； } .切换开关：悬停>img{ 显示：无； } .switcher>.switch文本{ 显示：无； 宽度：100%； 身高：100%； 背景色：RGB2111238208； } .switcher:hover>.switch文本{ 显示：块； } 母公司{ 溢出：隐藏； 边际：0px； } .对{ 左边框：2倍实心； 边框颜色：rgb215、217、216； 左侧填充：20px； 浮动：对； 宽度：270px； } .左{ 边际：0px； 溢出：隐藏； 身高：100%； } 身体{ 边际：0px； 字体系列：Calibri； } 校长20{ 字号：16pt； } 内在的{ 左边距：10px； 宽度：730px； 保证金：0自动； } .行{ 显示器：flex； /*相等的 孩子们的身高*/ } 这里有一些文字 这里有一些文字 这是一张桌子 第一点 第二点 第三点 这是另一张桌子 第一点 第二点 第三点

---

非常感谢James，我考虑过将两个横幅放在一个新的分区中。但是当我们这样做时，两个横幅之间的距离以及下面横幅与第一个表格之间的距离将会扩大，这在这种情况下是不允许的。顶部、左侧、右侧边界的横幅之间的距离必须保持不变。在我的示例中，我认为横幅之间的距离与您的示例中的距离相同。不是吗？不，因为你用了div，表单就坏了。横幅之间的距离扩大了。带有右边框的横幅之间的距离也会扩大。你能再检查一下吗？@gnase我已经更新了我示例中的链接-横幅现在垂直和左右位置正确：谢谢。但下面横幅与第一张桌子之间的距离仍然大于两张桌子之间的距离。这就是我想说的，当你使用div:Dthanks很多James，我想把两个横幅放在一个新的div中。但是当我们这样做时，两个横幅之间的距离以及下面横幅与第一个表之间的距离将会扩大，这在这种情况下是不允许的。顶部、左侧、右侧边界的横幅之间的距离必须保持不变。在我的示例中，我认为横幅之间的距离与您的示例中的距离相同。不是吗？不，因为你用了div，表单就坏了。横幅之间的距离扩大了。带有右边框的横幅之间的距离也会扩大。你能再检查一下吗？@gnase我已经更新了我示例中的链接-横幅现在垂直和左右位置正确：谢谢。但下面横幅与第一张桌子之间的距离仍然大于两张桌子之间的距离。这就是我想说的，当你经常使用div:Dthanks时，Alex。我还有一个问题。你看到横幅和下面的表格放进去了吗。我不知道为什么它会出现在页面的左侧？.row{display:flex；}导致了这种情况；哇，你真了不起。谢谢！对不起，我已经接受了詹姆斯的回答。但我也用另一个账户为你投票当然没问题！我做这件事已经两年了。因此，帮助他人也有助于我的学习和实践x@gnase只需添加另一个内包装器，或使用paddinghanks进行大量工作。我还有一个问题。你看到横幅和下面的表格放进去了吗。我不知道为什么它会出现在页面的左侧？.row{display:flex；}导致了这种情况；哇，你真了不起。谢谢！对不起，我已经接受了詹姆斯的回答。但我也用另一个账户为你投票当然没问题！我做这件事已经两年了。因此，帮助他人也有助于我的学习和实践x@gnase只需添加另一个内部包装器，或使用填充