javascript - 表格在悬停时填充 div

Question

所以，我正在尝试制作一个简单的交互式日历。最初我只想显示几个月，但是当鼠标悬停在一个月上时，我希望显示所有单独的日子。最终，我希望能够点击每一天来查看当天的内容。

这是我目前拥有的:http://jsfiddle.net/r8orrebk/

html:

<div id = "calendar">
<div class="month">
    January
    <table class="days">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
        <tr>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
        </tr>
    </table>
</div>
<div class="month">February</div>
<div class="month">March</div>
<div class="month">April</div>
<div class="month">May</div>
<div class="month">June</div>
<div class="month">July</div>
<div class="month">August</div>

CSS:

.days {
    display: none;
    border: 1px solid;
}
.month {
    width: 24%;
    height: 150px;
    float: left;
    border: 1px solid;
    margin: -1px 0 0 -1px;
}
.month:hover > .days {
    display: block;
}

实现此目标的最佳方法是什么？我刚开始使用 HTML 和 CSS，所以我什至不知道使用表格是否是个好主意。与我现在所拥有的不同，我希望天数填满整个月的 div。

我应该在 CSS 中使用 javascript/jquery 而不是 hover 吗？

此外，有没有一种方法可以让我把一个月的天数计算出来，然后每个月都使用它，或者我是否需要像现在这样为每一天做一个 div 或 td？

谢谢。

Answer 1

当 .days 激活并且是 display:block 时，它默认为 100% 宽。这就是 block 显示的工作原理。

您可以通过将显示设置为表格而不是 block 来修复它:

.month:hover > .days {
    display: table;
}