Question

我有一个看起来像这样的div和表

<div id='mydiv'>
    <table>
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>

我想要的是div＆＃34; mydiv＆＃34;应该与表重叠。我已经尝试过所有方法（z-index，定位）来做到这一点，但我无法这样做。感谢早期的回应。谢谢！

Answer 1

您可以尝试将此CSS添加到mydiv。添加了一张图片，以便您了解div与table重叠。

#mydiv
{
  background-color:#666666;
  z-index: 30001; 
  opacity: .6; 
  filter: alpha(opacity=70);
  position: fixed;
  height:20%;
}

＆＃13;

var x = document.getElementsByTagName("BODY")[0];
x.onclick = function (e) {
  alert(e.target);
}

＆＃13;

#mydiv
{
  background-color:#666666;
  z-index: 30001; 
  opacity: .6; 
  filter: alpha(opacity=70);
  position: fixed;
  height:20%;
}

＆＃13;

<body >
<div id='mydiv'>
    <p style="position: absolute; left:30%; color: White;pointer-events: none;"> 
        <img id="loading"   alt="Loading ..." src="~/Images/loading.gif" /> 
    </p> 
    <table style="pointer-events: none;">
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>
  </body>

＆＃13;

修改

为此，您可以将pointer-events: none;放到您的桌面上，当您点击table cells时，会点击div。我相应地修改了代码。希望这会有所帮助：）

这样做：

var x = document.getElementsByTagName("BODY")[0]; x.onclick = function (e) { alert(e.target); }

Answer 2

$('#mydiv').children().each(function(i, c) {
    disableSelection(c);
});

function disableSelection(target) {
    console.debug(target);

    if (typeof target.onselectstart != "undefined")             // For IE
        target.onselectstart = function() { return false };
    else if (typeof target.style.MozUserSelect != "undefined")  // For Firefox
        target.style.MozUserSelect = "none";
    else                                                        // All other routes (Opera, etc.).
        target.onmousedown = function() { return false };

    target.style.cursor = "default";
}


$( "#mydiv" ).click(function() {
  var htmlString = $( this ).html();
  alert(htmlString);
});

#mydiv{
  background : gray;
  position : absolute;
  margin :10px;
  padding:10px;
  filter: alpha(opacity=70);
  opacity: .6; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='mydiv'>
    <table>
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>

父div必须与子div重叠

2 个答案: