横幅的鼠标效果

Question

我正在做练习。这是我的界面。现在我想要左边两个横幅的鼠标效果：

当我们在每个横幅上移动鼠标时，该横幅将替换为具有相同尺寸的文本框，绿色背景（不影响其他横幅），如下所示。

我知道我们可以通过javascript以某种方式实现这种效果，但由于我正在学习HTML，javascript对我来说并不容易，你们可以帮助我作为一个例子吗？这是我的代码：

#parent {
    overflow: hidden;
    margin:0px;
}

.right {
    border-left: 2px solid;
    border-color: rgb(215,217,216);
    padding-left: 20px;
    float: right;
    width: 270px;
}
.left {
    margin: 0px;
    overflow: hidden;
    height: 100%;
}

body {
    margin:0px;
    font-family: Calibri;
}

header20 {
    font-size: 16pt;
}

#inner {	
    margin-left: 10px;
    width:730px;
    margin: 0 auto;
}

.row {
    display: flex; /* equal height of the children */
}

<div id="parent" class="row">
    <div class="right">
        <br>
        <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
        <br><br>
        <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
        <br><br>
        <table style='width:250px;background-color:rgb(211,238,208)'>
        <tr>
            <td>
            <header20><span style='color:rgb(17,56,96)'><b>This is the first table</b></span></header20>
            <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
                <li>First point</li>
                <li>Second point</li>
                <li>Third point</li>
            </ul>
            </td>
        </tr>
        </table>
        <br>
        <table style='width:250px;background-color:rgb(211,238,208)'>
        <tr>
            <td>
            <header20><span style='color:rgb(17,56,96)'><b>This is the second table</b></span></header20>
            <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
                <li>First point</li>
                <li>Second point</li>
                <li>Third point</li>
            </ul>
            </td>
        </tr>
        </table>
        <br>
    </div>

    <div class="left">
        <div id="inner">
            <br>
            <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'>
            <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page -  bla bla bla <br>Timetable for the next month</b></p> 
            <p style='margin-left:1cm'> The first line of the content</p>
            <p style='margin-left:1cm'> The second line of the content</p>
            <p style='margin-left:1cm'> The third line of the content</p>
            <br>
        </div>			
			
        <table align='center'>
        <tr>
            <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td>
            <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td>
            <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td>
        </tr>
        </table>
    </div>
</div>

Answer 1

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

https://jsbin.com/hecesusiwu/1/edit?html,css,output

以下是要解决的步骤：

• 以div
换行图像
• 添加另一个包含文字的div
• 隐藏内部div
• 在悬停时显示内部div

Answer 2

由于这是一个练习，我只想给你一点建议： 包装横幅和隐藏的文本框。当悬停包装时，您只需隐藏横幅并显示文本框。

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

.switcher {
  width: 250px;
  height: 50px;
}
.switcher > img {
  display: block;
}
.switcher:hover > img {
  display: none;
}
.switcher > .switch-text {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgb(211, 238, 208);
}
.switcher:hover > .switch-text {
  display: block;
}
#parent {
  overflow: hidden;
  margin: 0px;
}
.right {
  border-left: 2px solid;
  border-color: rgb(215, 217, 216);
  padding-left: 20px;
  float: right;
  width: 270px;
}
.left {
  margin: 0px;
  overflow: hidden;
  height: 100%;
}
body {
  margin: 0px;
  font-family: Calibri;
}
header20 {
  font-size: 16pt;
}
#inner {
  margin-left: 10px;
  width: 730px;
  margin: 0 auto;
}
.row {
  display: flex;
  /* equal height of the children */
}

<div id="parent" class="row">
  <div class="right">
    <br>
    <div class="switcher">
      <div class="switch-text">
        Some Text here
      </div>
      <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'>
    </div>
    <br>
    <br>
    <div class="switcher">
      <div class="switch-text">
        Some Text here
      </div>
      <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'>
    </div>

    <br>
    <br>
    <table style='width:250px;background-color:rgb(211,238,208)'>
      <tr>
        <td>
          <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span>
          </header20>
          <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
            <li>First point</li>
            <li>Second point</li>
            <li>Third point</li>
          </ul>
        </td>
      </tr>
    </table>
    <br>
    <table style='width:250px;background-color:rgb(211,238,208)'>
      <tr>
        <td>
          <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span>
          </header20>
          <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'>
            <li>First point</li>
            <li>Second point</li>
            <li>Third point</li>
          </ul>
        </td>
      </tr>
    </table>
    <br>
  </div>
</div>