jQuery изменяемый размер: как изменить размер при наведении контейнера тд?

Question

У меня есть таблица, похожая на календарь.
Пожалуйста, посмотрите на фрагмент кода, трудно объяснить, что я хочу получить от jQuery.

Я могу бросить блок с именем «test» превращается в ресурс <td>, но когда я хочу изменить его размер, он изменяет размер своего контейнера ресурсов td ...

я просто хочу изменить размер моего отброшенного блока «test» при наведении курсора на тд и я не знаю, как это сделать ...

на самом деле тест div меняет размер td ...

заранее спасибо за вашу помощь

        $(function () {

            // There's the gallery and the trash
            var $job = $("#testblocks"),
                $ressource = $(".ressource");

            // Let the gallery items be draggable
            $("div", $job).draggable({
                cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                containment: ".containment-wrapper",
                helper: "clone",
                cursor: "move",
                snap: "td",
                scroll: false,
                refreshPositions: true,
                drag: function () {
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                    /*$('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);*/
                }
            });
            $("div", $job).resizable({
                handles: 'e, w',
                containment: ".containment-wrapper"
            });

            $ressource.droppable({
                hoverClass: 'hovering',
                tolerance: 'pointer',
                accept: "#testblocks > div, .ressource div",
                classes: {
                    "ui-droppable-active": "ui-state-highlight"
                },
                drop: function (event, ui) {
                    $(ui.draggable).appendTo($(this, "td"));
                }
            });

            $job.droppable({
                accept: ".ressource div",
                classes: {
                    "ui-droppable-active": "custom-state-active"
                },
                drop: function (event, ui) {
                    $(ui.draggable).appendTo($job);
                }
            });


        });

        
        .drag {
            height: 49px;
            width: 60px;
            text-align: center;
        }

        td {
            border: 1px solid black;
            /*height:50px;*/
            width: 160px;
        }

        th {
            border: 1px solid black;
            /*height:50px;*/
            width: 180px;
        }

        tr {
            border: 1px solid black;
            height: 150px;
        }

        .basr {
            height: 150px;

        }

        .masterContent {
            padding: 0;
            margin: 0;
        }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table cellspacing="0" style="border:1px solid black; text-align:center;">
    <tr style="border:1px solid black;">
        <th style="border:1px solid black;"></th>
        <th style="border:1px solid black;">12am</th>
        <th style="border:1px solid black;">1am</th>
        <th style="border:1px solid black;">2am</th>
        <th style="border:1px solid black;">3am</th>
        <th style="border:1px solid black;">4am</th>
        <th style="border:1px solid black;">5am</th>
        <th style="border:1px solid black;">6am</th>
        <th style="border:1px solid black;">7am</th>
        <th style="border:1px solid black;">8am</th>
        <th style="border:1px solid black;">9am</th>
        <th style="border:1px solid black;">10am</th>
        <th style="border:1px solid black;">11am</th>
        <th style="border:1px solid black;">12pm</th>
    </tr>
    </thead>
    <tbody style="border:1px solid black;">
    <tr>
        <th>Ressource 1</th>
        <td colspan="26" rowspan="4" class="masterContent">
            <table cellspacing="0" style="width:100%;" class="containment-wrapper">
                <tr>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                </tr>
                <tr>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                    <td class="ressource"></td>
                </tr>

                <tr class="basr">
                    <td colspan="26" id="testblocks">
                        <!--<div id="draggable" class="ui-widget-content">
                            <div id="posX">blob</div>
                            <div id="posY">blob</div>
                        </div>-->
                        <div class="ui-widget-content ui-corner-tr drag">
                            test
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <th>Ressource 2</th>
    </tr>
    <tr class="basr">
        <th>bac à sable</th>
    </tr>

    </tbody>
</table>