1

次のソース コードを使用すると、2 つの問題があります。

  1. そのままでは、最後の行を除いて、下の影は表示されません

    ここに画像の説明を入力 ここに画像の説明を入力

  2. 要素から要素にbackground-color:white;ステートメントを転送すると、「特別な」DIVを含む行の前のものを除いて、シャドウはどこでも機能します。TDTR

    ここに画像の説明を入力 ここに画像の説明を入力

私が取り組んでいるアプリがテーブルを構築する方法を変更するのは非常に難しいので、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 に答える