Наложение ячеек таблицы с двумя кнопками при наведении

Question

У меня есть таблица, как показано здесь: http://jsfiddle.net/chapmand/7c7SZ/10/

По сути, это календарь. То, что я хочу добавить к этому, - то, когда я нахожу на ячейку таблицы, я хочу наложение на ячейку. Наложение должно заполнить ячейку, быть прозрачным и быть разделенным по центру, чтобы можно было щелкать левой и левой правой стороны.

Основной проблемой, с которой я столкнулся, является правильное наложение оверлея из-за числа в каждой ячейке. Число смещает оверлей так, что нарушает макет. Номер должен быть в правом верхнем углу каждой ячейки.

Я работал над этим несколько часов безуспешно. Любые предложения о том, как должна выглядеть структура данных внутри каждой ячейки и что мне нужно сделать с CSS, чтобы он отображал так, как я хочу?

Answer 1

Чтобы получить элементы <abbr> в верхнем правом углу, вы должны использовать position: absolute; top: 0; right: 0, но для этого потребуется position: relative для <td>;проблема в том, что не все браузеры разрешают position: relative в ячейке таблицы, поэтому вам нужно обернуть содержимое ячейки таблицы в <div>:

<td>
    <div class="td-hack">
        <abbr>11</abbr>
    <div>
</td>

И затем это (с границами и цветами фона)только в иллюстративных целях) поместит все в нужное место:

td {
    width: 50px;
    height: 50px;
    background: #eee;
    border: 1px solid red;
}
.td-hack {
    width: 100%;
    height: 100%;
    position: relative;
}
abbr {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px;
}

Для оверлея будет работать тот же вид position: absolute:

<div class="overlay">
    <div class="o-left"></div>
    <div class="o-right"></div>
</div>

И стиль с чем-тонапример:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dfd;
}
.o-left,
.o-right {
    width: 50%;
    height: 100%;
    display: inline-block;
}
.o-left {
    background: #dff;
}
.o-right {
    background: #ffd;
}

Затем вам просто нужно добавить наложение к .td-hack, когда начинается наведение, и удалить его, когда наведение завершится;в этом примере используется jQuery, чтобы избежать шума исходного решения JavaScript:

var overlay = '<div class="overlay">'
            + '<div class="o-left"></div>'
            + '<div class="o-right"></div>'
            + '</div>';
$('td').hover(
    function() {
        $(this).find('.td-hack').append(overlay);
    },
    function() {
        $(this).find('.overlay').remove();
    }
);

Демонстрационная демонстрация техники: http://jsfiddle.net/ambiguous/ah5s3/1/

Answer 2

I обновил вашу скрипку с приличным способом сделать это. Вот что я сделал:

• изменено << и >> на << и >>
• исправил опечатку в вашем CSS для vertical-align
• добавлено position: relative в CSS для вашего tbody td
• Использовал следующий чистый Javascript (не нужен jQuery) и CSS для добавления абсолютно позиционированного div при наведении курсора:

---

var day = document.getElementsByClassName('day'),
    daymouseover = function(e) {
        var elem = document.getElementById('dayhover'),
            skip = /otherMonth/.test(this.className),
            left, right;
        if (!skip) {
            if (!elem) {
                elem = document.createElement('div');
                left = document.createElement('div');
                right = document.createElement('div');
                elem.id = 'dayhover';
                left.className = 'left';
                right.className = 'right';
                elem.appendChild(left);
                elem.appendChild(right);
            }
            this.appendChild(elem);
            elem.style.display = 'block';
        }
    },
    daymouseout = function(e) {
        document.getElementById('dayhover').style.display = 'none';
    };

for (var i = 0, il = day.length; i < il; i++) {
    day[i].onmouseover = daymouseover;
    day[i].onmouseout = daymouseout;
}

---

#dayhover {
    width:80px;
    position:absolute; left:20px; top:40px;
}
#dayhover .left, #dayhover .right {
    float:left;
    opacity:0.5;
    padding:15px;
}
#dayhover .left {
    background:lime;
}
#dayhover .right {
    background:pink;
}

---

Вам нужно будет настроить CSS и всплывающее содержимое по мере необходимости, а также реализовать кросс-браузерную версию getElementsByClassName. Удачи!

Опять же, вот пример реализации .