2014-09-29 1 views
0

Используя следующий исходный код, у меня есть две проблемы:Box-тень на строке таблицы скрывает «под» следующей строкой, когда следующая строка окрашена

  1. как есть, нижняя тень не появляется, за исключением последняя строка

    enter image description here enter image description here

  2. если я передать background-color:white; заявление от TD элемента к элементу TR, то тень работает везде, кроме одного перед строкой, содержащей «специальный» DIV.

    enter image description here enter image description here

Было бы очень трудно изменить способ приложения я работаю над конструкциями стола, поэтому я не могу двигаться 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> 
+0

Это чистое предположение, следовательно, почему это не ответ, но вы могли бы сделать 'z- index' выше, когда применяется тень окна. Вы пробовали это? – worldofjr

ответ

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; 
}