[ERLEDIGT] Schatten Übernehmen

[MrBubbleSquare]

Ich habe folgendes Problem, ich habe ein sogesagtes Dropdown das denn Schatten von seinem Parent übernehmen soll.
Was er leider nicht tut? Hat jemmand ne Lösung parat ?

HTML:

<div id="mainbox">
    <div id="subbox1"></div>
    <div id="subbox2"></div>
</div>

CSS:

#mainbox {
    margin: 100px;
    width:50px;
    height:50px;
    -moz-box-shadow: 0 0 6px 1px #000;
    -webkit-box-shadow: 0 0 6px 1px #000;
    box-shadow: 0 0 6px 1px #000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=0, Color='#000000');
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#subbox1 {
    opacity:0.5;
    width: 50px;
    height: 50px;
    background-color: #ff00cc;
    position: relative;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
#subbox2 {
    opacity:0.5;
    background-color: #cc00ff;
    height: 75px;
    width: 50px;
    position: relative;
    display: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    top: -20px;
}

JS:

    jQuery("#mainbox").mouseenter(function(){
        jQuery(this).children("div#subbox2").slideDown("fast");
    }).mouseout(function () {
        jQuery(this).children("div#subbox2").slideUp("fast");
    });

Mit freundlichen Grüßen

MrBubbleSquare :)!

 

[Tronjer]

Dann erweitere doch die Callbacks.

$(this).children("div#subbox2").adClass('foo').slideDown("fast");

 

[MrBubbleSquare]

Wenn ich nun dem Dropdown auch den Schatten gebe sind dort dickere Schatten am Rand zu sehen durch den top:-20px;
die ich aber auch brauche um den Round Border verschwinden zu lassen.

 

[Tronjer]

Ich würde das display:none abschalten, mir eine CSS-Lösung bauen und anschließend überlegen, was ich davon nach jQuery verschiebe. Du könntest beim mouseover() ebenso die Eigenschaften des Elternelements manipulieren, den border-radius entfernen oder die Farbe des box-shadow ändern.

Was da nun gut aussieht, musst du schon selber herausfinden. Ich mache so etwas immer im Firebug.