Overlay table cells with two buttons on hover

问题

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.

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?

回答1:

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

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

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

A live demo of the technique: http://jsfiddle.net/ambiguous/ah5s3/1/

回答2:

I updated your fiddle with a decent way to accomplish this. Here's what I did:

changed << and >> to << and >>
corrected a typo in your CSS for vertical-align
added position: relative to the CSS for your tbody td
Used the following pure Javascript (no jQuery needed) and CSS to add an absolutely positioned div on hover:

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

You will have to adjust the CSS and hover contents as needed, and also implement a cross-browser version of getElementsByClassName. Good luck!

Again, here's the example implementation.

来源：https://stackoverflow.com/questions/6886103/overlay-table-cells-with-two-buttons-on-hover

标签

javascript

css

html-table