Verschachtelte CSS möglich?

[Pariak]

Hallo zusammen,

ich habe nun folgendes Problem.

Ich habe drei Felder, die ich mit DIV erstellt habe.

Nun soll, wenn man mit der Maus über ein der DIV-Felder geht, das eine DIV Feld größer werden und die anderen beiden kleiner, damit das eine DIV-Feld ein bisschen hervor sticht.

Natürlich könnte ich hier nun jQuery verwenden und mit mousenter() und mouseout() und darin animate() arbeiten, aber leider funktioniert dies nicht einwandfrei...

Da kam mir die Idee, das ganze mit CSS zu lösen, in dem ich "transition" nutze. Leider kriege ich es hier nur so hin, dass ich die Änderung nur auf ein Div-Feld ablegen kann, aber nicht auf alle 3. Also, wenn Maus über das 1.Div-Feld ist, dann wird dieses groß und die anderen werden kleiner.

Ich hoffe, dass mir jemand helfen kann.

Vielen Dank & beste Grüße
Pariak

 

[Pariak]

Ich konnte das Problem lösen

Trotzdem danke & beste Grüße
Pariak

 

[mikdoe]

Und wie hast du es gelöst?

 

[Pariak]

Das Problem konnte ich mit Javascript lösen:

var kleinFormat = "300px";
var großFormat = "400px";
var normalFormat = "350px";

$(document).ready(function () {
	/*Animation des Events-Feldes*/
    $("#event").mouseover(function () {
        $("#event").stop(true).animate({
            "width": großFormat,
            "height": großFormat,
        });
        $("#leer").stop(true).animate({
            "height": "0px"
        });
        $("#video").stop(true).animate({
            "width": kleinFormat,
            "height": kleinFormat
        });
        $("#werbung").stop(true).animate({
            "width": kleinFormat,
            "height": kleinFormat
        });
    });
    $("#event").mouseout(function () {
        $("#event").stop(true).animate({
            "width": normalFormat,
            "height": normalFormat,
        });
        $("#leer").stop(true).animate({
            "height": "50px"
        });
        $("#video").stop(true).animate({
            "width": normalFormat,
            "height": normalFormat
        });
        $("#werbung").stop(true).animate({
            "width": normalFormat,
            "height": normalFormat
        });
    }); ...

Für jedes einzelne DIV-Feld habe ich den Code kopiert und die IDs angepasst. Bestimmt kann man das ganze irgendwie kürzen, aber dazu fehlt mir das Wissen.

Ich hoffe, dass dies auch anderen hilft.

Falls Fragen zum Code sind, könnt ihr gerne fragen

Beste Grüße
Pariak

 

[jspit]

Etwas allgemeiner lautet das obige Problem:
Wie kann ich nur mit CSS per Hover über ein Element andere Elemente ändern?
Dieses Beispiel zeigt dies.
Es existieren 3 graue Elemente, Hover, Rot und Blau. Befindet sich die Maus über dem Element hover, erhalten Rot und Blau ihre Farben.
Das Beispiel könnte Ausgangspunkt für einige Versuche sein, das obige Problem komplett mit CSS zu lösen.

LG jspit