Question

使用以下源代码，我有两个问题：

按原样，除了最后一行
外，不会出现底部阴影
如果我将background-color:white;语句从TD元素转移到TR元素，那么阴影可以在任何地方使用，除了包含＆＃的行之前的那个39;特＆＃39; DIV。

改变我正在构建表格的应用程序的方式非常困难，因此我无法从DIV中移动special1和special2类。

如何才能在任何情况下突出显示这个亮点？

源代码

<HTML>
<BODY>
<HEAD>
<STYLE>
TR {
    line-height: 15px;
    background-color:white;
}

TD {    
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #333;
    height: inherit;
}

DIV.special1 {
    background-color:orange;
    float:left;
}

DIV.special2 {
    background-color:red;
}

TD.highlighted, TR.highlighted {
    -moz-box-shadow: 0px 0px 20px #333333;
    -webkit-box-shadow: 0px 0px 20px #333333;
    -o-box-shadow: 0px 0px 20px #333333;
    box-shadow: 0px 0px 20px #333333;
}
</STYLE>

<SCRIPT>
function highlight(id) {
    if (document.getElementById(id).className.indexOf("highlighted") == -1) document.getElementById(id).className += "highlighted";
}

function unhighlight(id) {
    document.getElementById(id).className = document.getElementById(id).className.replace("highlighted", "");
}
</SCRIPT>
</HEAD>

<TABLE width="200" BORDER="0" cellspacing="0" cellpadding="0">
<TR><TD id="1" onmouseover="highlight(1);" onmouseout="unhighlight(1);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="2" onmouseover="highlight(2);" onmouseout="unhighlight(2);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="3" onmouseover="highlight(3);" onmouseout="unhighlight(3);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="4" onmouseover="highlight(4);" onmouseout="unhighlight(4);"><DIV class="special1">test test test</DIV><DIV class="special2">test test test</DIV></TD></TR>
<TR><TD id="5" onmouseover="highlight(5);" onmouseout="unhighlight(5);"><DIV>test test test</DIV></TD></TR>
</TABLE>
</BODY>
</HTML>

Answer 1

为.highlighted元素jsFiddle Demo

添加相对定位

td.highlighted, tr.highlighted {
  -moz-box-shadow: 0px 0px 20px #333333;
  -webkit-box-shadow: 0px 0px 20px #333333;
  -o-box-shadow: 0px 0px 20px #333333;
  box-shadow: 0px 0px 20px #333333;
  position: relative;
}

桌子上的盒子阴影隐藏在＆＃34;＆＃34;＆＃34;下一行着色时的下一行

1 个答案: