javascript - 横幅的鼠标效果

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