Используя следующий исходный код, у меня есть две проблемы:Box-тень на строке таблицы скрывает «под» следующей строкой, когда следующая строка окрашена
как есть, нижняя тень не появляется, за исключением последняя строка
если я передать
background-color:white;
заявление отTD
элемента к элементуTR
, то тень работает везде, кроме одного перед строкой, содержащей «специальный» DIV.
Было бы очень трудно изменить способ приложения я работаю над конструкциями стола, поэтому я не могу двигаться special1 и special2 классы от DIVs.
Как я могу сделать эту работу с подсветкой в любой ситуации?
Исходный код
<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>
Это чистое предположение, следовательно, почему это не ответ, но вы могли бы сделать 'z- index' выше, когда применяется тень окна. Вы пробовали это? – worldofjr