Question

人

我试图让div重叠在我的桌子上，让用户知道这个td不再有效了。

我发现的最接近的例子是：http://jsfiddle.net/YCZ3J/32/

<html> 
    <head> 
        <title>Overlay Tests</title> 
    </head> 
    <body> 

    <table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative"> 
        <tr class="row"> 
            <td class="cell"><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" /></td>
            <td class="cell second">Text1</td>
            <td class="cell">Text2</td>
            <td class="cell">Text3</td>
        </tr> 
        <tr class="row">
              <td class="cell"><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_64.png" /></td>
            <td class="cell second">Text1</td>
            <td class="cell">Text2</td>
            <td class="cell">Text3</td>         
        </tr>
    </table> 
    <div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> 
</body> 
</html>

的Javascript

$(document).ready(function() {
    $('.row').mouseover(function() {
        var $divOverlay = $('#divOverlay');
        var bottomWidth = $(this).css('width');
        var bottomHeight = $(this).css('height');
        var rowPos = $(this).position();
        bottomTop = rowPos.top;
        bottomLeft = rowPos.left;
        $divOverlay.css({
            position: 'absolute',
            top: bottomTop,
            right: '0px',
            width: '66.7%',
            height: bottomHeight
        });

        $('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft);
        $divOverlay.delay(1000).slideDown('fast');
    });
    $('#divOverlay').mouseleave(function() {
        var $divOverlay = $('#divOverlay');
        $divOverlay.slideUp();
    });
});

CSS

.cell{width: 80px; height: 80px; border: 1px solid #000;}
.blind{display: none; background:#000; height: 80px; width: 320px;}
.second{display:none; background: #00f; height: 80px; width: 320px;}
#divOverlay { display: none; background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }

从上面的例子中，我只想删除mouserover效果，这样 divOverlay可以在任何时候超过td。我试图修改Javascript代码，但我失败了。

Answer 1

您不需要使用javascript。如果你想＆＃34;灰色＆＃34;一个单元格只使用CSS。

在小提琴示例中，使用此位CSS

创建了灰色区域

#divOverlay { display: none; background-color:Silver; text-align:center;  position:absolute; z-index:10000; opacity:0.5; }

javascript仅适用于鼠标效果。

编辑：醒来后，使用一个清醒的非困倦的心灵，我摆弄你的小提琴。

这是更新的小提琴，可以实现您的目标 http://jsfiddle.net/YCZ3J/338/

HTML：在表格上叠加div

1 个答案: