悬停时有两个按钮覆盖表格单元格 [英] Overlay table cells with two buttons on hover

问题描述

我在这里有一张桌子: http://jsfiddle.net/chapmand/7c7SZ/10/

I have a table as viewed here: http://jsfiddle.net/chapmand/7c7SZ/10/

从本质上讲，它是一个日历.我要添加的内容是，当我将鼠标悬停在表格的某个单元格上时，我希望该单元格上有一个覆盖层.叠加层应填充单元格，保持透明，并在中间分开，这样我可以分别使左侧可单击和右侧可单击.

Essentially, its a calendar. What I want to add to it is, when I mouse over a cell of the table I want an overlay on the cell. The overlay should fill the cell, be transparent, and be split down the middle so that I can make the left side clickable and the right side clickable separately.

由于每个单元格中的数字，我一直遇到的主要问题是使覆盖层正确定位.该数字会移动覆盖层，从而破坏布局.该数字应位于每个单元格的右上角.

The major issue I have been having is getting the overlay to position properly because of the number that is in each cell. The number displaces the overlay so that and breaks the layout. The number should be in the top right corner of each cell.

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

I have been working on this for a few hours with no success. Any suggestions on what the structure of the data inside each cell should look like and what I need to do with the css to make it display the way I want?

推荐答案

要在右上角获取< abbr> 元素，您需要使用 position:absolute;最高:0;正确:0 ，但在< td> 上需要 position:relative ；问题在于，并非所有浏览器都允许在表格单元格中使用 position:relative ，因此您必须将表格单元格的内容包装在< div> :

To get your <abbr> elements in the upper right corner, you want to use position: absolute; top: 0; right: 0 but that would require position: relative on the <td>; the problem is that not all browsers will allow position: relative on a table cell so so you have to wrap the table cell's content in a <div>:

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

然后，此操作(带有边框和背景色仅用于说明目的)会将所有内容放置在正确的位置:

And then this (with borders and background colors for illustrative purposes only) will put everything in the right place:

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:绝对技巧将适用于您的叠加层:

The same sort of position: absolute trickery will work for your overlay:

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

并使用如下样式设置其样式:

And style it with something like this:

.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解决方案带来的噪音:

Then you just need to append the overlay to .td-hack when the hover starts and remove it when the hover ends; this example uses jQuery to avoid the noise of a raw JavaScript solution:

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/

这篇关于悬停时有两个按钮覆盖表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！