我有一张表格,如下所示: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();
}
);
关于javascript - 悬停时用两个按钮覆盖表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6886103/