在悬停时用两个按钮覆盖表格单元格

Overlay table cells with two buttons on hover

本文关键字：按钮 两个 覆盖 表格 单元格 悬停      更新时间：2023-09-26

我有一个表在这里查看:http://jsfiddle.net/chapmand/7c7SZ/10/

本质上，它是一个日历。我想添加的是，当我把鼠标放在表格的单元格上时，我想在单元格上加一个覆盖。覆盖层应该填充单元格，是透明的，并从中间分开，这样我就可以让左侧和右侧分别可点击。

我一直遇到的主要问题是使叠加位置正确，因为每个单元格中的数字。数字取代了覆盖层，从而破坏了布局。数字应该在每个单元格的右上角。

我已经做了几个小时了，没有成功。关于每个单元格内的数据结构应该是什么样子的，以及我需要用css做什么来显示我想要的方式，有什么建议吗?

要在右上角获得position: absolute; top: 0; right: 0元素，您需要使用position: relative，但这需要position: relative上的<td>;问题是，并不是所有的浏览器都允许在表格单元格上使用<div>，所以你必须在表格单元格的内容中使用position: absolute:

<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;
}

同样的.td-hack技巧也适用于你的叠加:

<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;
}

然后你只需要在悬停开始时将覆盖添加到<<，并在悬停结束时将其删除;这个例子使用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/

我用一种体面的方式更新了您的小提琴。我是这样做的:

  • 将<abbr>0和&lt;&lt;更改为&gt;&gt;和vertical-align
  • 更正了position: relative
    • 的CSS错字
  • 将tbody td添加到getElementsByClassName
    • 的CSS中
  • 使用以下纯Javascript(不需要jQuery)和CSS在hover上添加绝对定位的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和悬停内容，并实现CC_17的跨浏览器版本。好运！

同样，这里是示例实现。

相关文章：