1

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

  1. 照原样，底部阴影不出现，除了最后一行

    在此处输入图像描述 在此处输入图像描述

  2. 如果我将background-color:white;语句从TD元素转移到TR元素，那么阴影在任何地方都有效，除了包含“特殊”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>
4

1 回答 1

2

.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;
}
于 2014-09-29T21:07:38.840 回答