[CSS] Hover moet meerdere elementen aanpassen.

[MarkPhotography]

Beste Tweakers,

Ik ben bezig om een website te maken. Ik heb hier een (klein) beetje ervaring in maar niet heel veel. Ik heb de volgende stylesheet geschreven (is nu ingekort om het duidelijk te maken):

Cascading Stylesheet:

.About {
    position: absolute;
    transition-duration: 1s;
    background-color: White;
    border-style: solid;
    border-width: 5px;
    top: 15%;
    Left: 5%;
    width: 25%;
    Height: 35%;
}
.Blog {
    position: absolute;
    transition-duration: 1s;
    background-color: White;
    border-width: 5px;
    border-style: solid;
    top: 30%;
    Left: 35%;
    width: 40%;
    Height: 20%;
}
.Portfolio {
    position: absolute;
    transition-duration: 1s;
    background-color: White;
    border-width: 5px;
    border-style: solid;
    top: 15%;
    Left: 80%;
    width: 15%;
    Height: 55%;
}
.Extra04 {
    position: absolute;
    transition-duration: 1s;
    background-color: White;
    border-style: solid;
    border-width: 5px;
    top: 15%;
    Left: 35%;
    width: 40%;
    Height: 10%;
}
.About:hover {
    Width: 70%;
    Height: 35%; 
    transition-duration: 1s;
}
.About:hover + .Blog {
    Width: 10%;
    Height: 10; 
    top: 30%;
    Left: 80%;
    transition-duration: 1s;
}   
 .About:hover + .Extra04 {
    Width: 20%;
    Height: 10%; 
    top: 15%;
    Left: 70%;
    transition-duration: 1s;
}
 .About:hover + .Portfolio {
    transition-duration: 1s;
    top: 15%;
    Left: 90%;
    width: 5%;
    Height: 55%;
} 
.Portfolio:hover {
    top: 15%;
    Left: 20%;
    width: 75%;
    Height: 55%;
    transition-duration: 1s;
}

De bedoeling van deze code is als je op het element .About hovert dit element groter wordt en de andere elementen kleiner worden en verplaatsen naar een deel van de pagina. Met de bovenstaande code lukt dit alleen voor het .About en het .Blog Element. De andere elementen, .Extra04 en .Portfolio reageren niet.

Mijn vraag aan jullie is dan ook of jullie weten waar dit aan ligt en de eventueel oplossing hiervoor. Ik heb het al geprobeerd met Javascript maar hier heb ik te weinig kennis van om een goede code te kunnen schrijven. Met Google al gezocht naar oplossingen maar de richten zich vooral op twee elementen en niet meer.

De Documenten kunt jullie hier vinden: https://drive.google.com/folderview?id=0B_-kuxgu_ReudlJiZjhRdXBMS0E&usp=sharing

Ik hoop dat mijn probleem duidelijk is. En jullie mij kunnen helpen aan een oplossing!

Alvast bedankt!

Mark

[alex3305]

Omdat je met het + teken alleen direct adjecent (aanliggende) items aanspreekt. Het zou moeten werken met het tilde symbool in plaats van de plus.

[MarkPhotography]

Het werkt! Heb ik daar mijn halve zondag aan besteed...

In ieder geval hartstikke bedankt!