JQuery：div类特定的悬停不使用bootstrap css

Question

语境：

使用DJango开发“google-calendar-like”硬件预订工具。

• 查看预订（他们的时间段和预订用户）。
• 单击空白区域以创建另一个预留（引导模式窗体）
• 点击你自己的预订进行编辑（bootstrap模态表格）
• 通过查询服务器（AJAX-GET）动态更新“日历”。
• 预订数据以类似的方式更新（AJAX - POST）。

example

“日历”是一个完全由div组成的自定义设置（我在td中定位预订时遇到了麻烦）。

<main class="container">
    <div class="calendar">
        <div class="calendar_col">
            <div class="calendar_header"></div>
            {% for time in time_range %}
                <div class="calendar_header">{{ time }}:00 - {{ time|add:1 }}:00</div>
            {% endfor %}
        </div>
        {% for weekday in weekdays %}
            <div style="height: {{ time_range|length|add:1|mul:1.25 }}em" class="calendar_col" id="{{ weekday|lower }}">
                <div class="calendar_header">{{ weekday }}</div>
                {% for time in time_range %}
                    <div id='{{ weekday|lower }}_{{ time }}h' class="calendar_seperator" style="position: absolute; top: {{ forloop.counter|mul:1.25 }}em">&nbsp;</div>
                {% endfor %}
            </div>
        {% endfor %}
    </div>
</main>

某些预订可能跨越多天（例如周一至周四的示例图像）。为了更容易识别，我想在用鼠标悬停时突出显示所有相关的块。

在创建块时，我为id（ex：monday_14）提供“reservation”类和“weekday_reservationpk”。

function createReservationDom(weekday, reservation, vertical_offset, height) {
    let reservation_do = $('<div>', {
        id: weekday + "_" + reservation['id'],
        class: 'reservation',
        style:  'position: absolute;' +
                'top: ' + vertical_offset + 'em;' +
                'height: ' + height + 'em;',
    });

    if (height >= 1.25) {
        const reserving_user_do = $('<p>', {
            class: 'reservation_text',
            text: reservation['reserving_user']
        });

        reservation_do.append(reserving_user_do);

        if (reservation['reserving_user'] === current_user) {
            reservation_do.css('font-weight', 'bold');
        }
    }

    return reservation_do
}

当“预留”类对象悬停时，应该从对象ID解析预留键。它和具有所述预留键的每个其他预约对象应该改变颜色。

function updateReservationVfxTriggers() {
    console.log('updateReservationVfxTriggers');
    $('.reservation').hover(
        handleReservationHoverIn, handleReservationHoverOut);
}

function handleReservationHoverIn() {
    console.log('Hover In reservation');
    handleReservationHover($(this), "deepskyblue");
}

function handleReservationHoverOut() {
    console.log('Hover Out reservation');
    handleReservationHover($(this), "lightskyblue");
}

function handleReservationHover(affected_do, background_color) {
    const reservation_id = affected_do.attr('id').split('_')[1];
    let reservation_do;

    $.each(weekdays, function (index, weekday) {
        reservation_do = $('#' + weekday + '_' + reservation_id);

        if (reservation_do !== undefined) {
            reservation_do.css("background-color", background_color);
        }
    });
}

每次处理新的预留数据（AJAX-GET）后，都会调用updateReservationVfxTriggers。

function updateCalendarData(data, status) {
    logSuccessfulReservationRetrieval(data, status);
    clearCalendarData();

    const reservations_json = jQuery.parseJSON(data['reservations']);

    $.each(weekdays, function (index, weekday) {
        updateCalendarWeekdayData(weekday, reservations_json)
    });

    updateReservationVfxTriggers();
}

问题：

一切正常，直到我开始使用bootstrap。当我将鼠标悬停在预订上时没有任何反应。事实上，控制台甚至没有记录输出悬停和悬停（见上面的代码）。如果我从页面标题中注释掉bootstrap样式表导入，一切正常。

如果有人能帮我指出问题是什么和可能的解决方案，我们将不胜感激。

谢谢

Answer 1

我真的不明白为什么它被修复但是确实如此。

包含保留的div的z-index为-1。我将其更改回0并增加了我的预留div的z-index。

¯\_(ツ)_/¯