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

标签 javascript css html-table

我有一张表格,如下所示:http://jsfiddle.net/chapmand/7c7SZ/10/

本质上,它是一个日历。我想添加的是,当我将鼠标悬停在表格的某个单元格上时,我想要在该单元格上覆盖。叠加层应填充单元格、透明并从中间分开,这样我就可以分别使左侧可点击,右侧可点击。

我遇到的主要问题是让叠加层正确定位,因为每个单元格中都有数字。数字取代了覆盖层,从而破坏了布局。该数字应位于每个单元格的右上角。

我已经为此工作了几个小时,但没有成功。关于每个单元格内的数据结构应该是什么样子以及我需要如何处理 CSS 以使其以我想要的方式显示,有什么建议吗?

最佳答案

获取您的 <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/

关于javascript - 悬停时用两个按钮覆盖表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6886103/

相关文章:

html - 如何删除tr之间的空格

html - 用 CSS 覆盖 HTML img

javascript - 如何向用户隐藏 JavaScript 变量?

JavaScript 屏蔽文本输入,例如名称字段

css - bootstrap 3 表单中的水平多选选项

css - Div 和图层

html - CSS 全高响应式网站

javascript - 根据类别选择数据表数据

相当于 Java 的 matcher.matches 的 Javascript

javascript - 迭代 td 中的每个输入字段