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

我updated your fiddle以一种体面的方式来实现这一目标。这是我做的：

将<<和>>更改为<<和>>
更正了CSS中vertical-align
将position: relative添加到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的跨浏览器版本。祝你好运！

再次，here's the example implementation。

覆盖表格单元格，悬停时有两个按钮

2 个答案: