Box-Shadow funktioniert nicht richtig

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Box-Shadow funktioniert nicht richtig

    Hallo,
    ich habe eine kleine Tabelle wo ich einen Box-Shadow per onMouseover nach Innen eingestellt habe. Leider funktioniert der Effekt nicht auf Zeilen, die wiederum auch 2 Zeilen behinhalten. Auf Zeile 1 funktioniert der Effekt, auf Zeile 2 nicht. Das Problem habe ich schon erkannt. Das blaue Hintergrundbild überdeckt den Effekt.
    Habt Ihr ne Idee wie ich das Lösen kann, bevor ich mir wieder stundenlang den Kopf zerbreche oder die Finger heiß tippe.
    Vielen Dank.

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    6. <style type="text/css">
    7. * {margin: 0px; padding: 0px; border-collapse: collapse;}
    8. .außendiv {width: 100%; height: 100%; text-align: center; vertical-align: middle;}
    10. .b6 {-moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: inset 0px 0px 10px #333;}
    11. .b7 {border-left: 1px solid #888; border-top: 1px solid #888; border-bottom: 1px solid #888;}
    12. .b-blue {background-image: url(b-blue.gif); background-position: center; background-repeat: repeat-x;}
    13. </style>
    14. </head>
    15. <body>
    16. <table border="1">
    17. <tr>
    18. <td><input type="button" value=" Wo " style="width: 100%;"></td>
    19. <td><input type="button" value=" Wer1 " style="width: 100%;"></td>
    20. <td><input type="button" value=" Wer2" style="width: 100%;"></td>
    21. </tr>
    23. <tr onmouseover="this.className='b6';" onmouseout="this.className='b7';">
    24. <td class="b-blue">&nbsp;Entenhausen&nbsp;</td>
    25. <td class="b-blue">&nbsp;Donald Duck&nbsp;</td>
    26. <td class="b-blue">&nbsp;Mickey Mouse&nbsp;</td>
    27. </tr>
    29. <tr onmouseover="this.className='b6';" onmouseout="this.className='b7';">
    30. <td class="b-blue">&nbsp;Entenhausen&nbsp;</td>
    31. <td class="b-blue">&nbsp;Donald Duck&nbsp;</td>
    32. <td><table class="außendiv"><tr><td class="hrow b-blue">Tick</td></tr><tr><td class="hrow b-blue">Trick</td></tr></table></td>
    33. </tr>
    34. </table>
    35. </body>
    36. </html>
    Alles anzeigen

  • Hm, achso. Naja, das Problem ist halt das der Hintergrund der Elemente in der rechten unteren Zelle eben die box shadow einstellungen überlagern.

    Eine möglichkeit wäre das ganze per jquery zu machen: jsfiddle.net/der_robert/UBMgL/2/

    In diesem Fall wird einer Zelle die keine "div" Elemente enthält die Klasse "full_a b c" hinzugefügt, Zellen die div Elemente enthalten bekommen die Klasse "half_a b c" - angenommen Zellen enthalten maximal 2 div Elemente dann müsstest du zwei Hintergrundbilder erstellen, eins mit normaler höhe und eins mit halber höhe und dann das repeat-x auf nur repeat ändern (für die half Klasse - damit dich das halb hohe hintergrundbild auch nach unten verlängert (und zur seite)).

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von der_robert ()