• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Webkit mehrere Elemente

N

noelelias

Neues Mitglied
Guten Tag
ich habe folgendes Problem:
Ich kann ein element mir CSS ansteuern ein 2tes allerdings nicht, wie ist das möglich?

Hier mein code:
Code: 
#Personen
{
    -webkit-perspective: 600px;
    -moz-perspective: 600px;

}
#PersonenFront
{
    float:left;
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: darkgrey;
    text-align: center;
    font-family: Roman;
    font-size: 22px;
    color:black;
    background-image: url(Unbenannt.png);
    position:relative;
 
 
    z-index: 900;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}

#PersonenBack
{
 
    float:left;
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: darkgrey;
    text-align: center;
    font-family: Roman;
    font-size: 22px;
    color:black;
    background-image: url(Unbenannt.png);
    position:relative;
    z-index: 800;
    margin-left: -300px;
    visibility:hidden;
 
 
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
 
 

    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}
#Personen:hover #PersonenFront{
    z-index: 800;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);

}
#Personen:hover #PersonenBack{
 
    z-index: 900;
 

    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
 
} 
















#Cargo
{
    -webkit-perspective: 600px;
    -moz-perspective: 600px;

}
#CargoFront
{
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: darkgrey;
    margin-left: 50%;
    text-align: center;
    font-family: Roman;
    font-size: 22px;
    color:black;
    background-image: url(Unbenannt.png);
    position:relative;
 
 
    z-index: 900;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}

#CargoBack
{
 
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: darkgrey;
    margin-left: 50%;
    text-align: center;
    font-family: Roman;
    font-size: 22px;
    color:black;
    background-image: url(Unbenannt.png);
    margin-left: -300px;
    visibility:hidden;
 
 
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
 
 

    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;

}
#Cargo:hover #CargoFront{
    z-index: 800;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);

}
#Cargo:hover #CargoBack{
 
    z-index: 900;
 

    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
 
}

HTML: 
<div id="fPage">
        <div id="fBackground">
         
                <div id="Personen">
                    <div id="PersonenFront" onmouseover="Per()" onmouseout="PerOut()">Personen TukTuk</div>
                    <div id="PersonenBack">Hier erhälst du alle wichtigen Informationen zu den Personen TukTuk</div>
                </div> 
             
                <div></div>
             
                <div id="Cargo">
                    <div id="CargoFront" onmouseover="Carg()" onmouseout="CargoOut()">Cargo TukTuk</div>
                    <div id="CargoBack"></div>
                </div>
             
             
        </div>
    </div>

PHP: 
//JavaScript
function Per() {
         window.setTimeout("Personen()", 250);
  
    }
function Personen() {
       
        $("#PersonenBack").css({"visibility":"visible"});
    }
function PerOut() {
        $("#PersonenBack").css({"visibility":"hidden"});
  
    }
function Carg() {
         window.setTimeout("Cargo()", 250);
  
    }
function Cargo() {
       
        $("#CargoBack").css({"visibility":"visible"});
    }
function CargoOut() {
        $("#CargoBack").css({"visibility":"hidden"});
  
    }
 
Werbung:
leider funktioniert das bei mir nicht bei mir wird wenn ich über das eine element fahre gleich das 2te angesteuert und wenn ich über das 2te fahre funktioniert es
 
Werbung:
Ich habe keine Lust, aus 180 Zeilen CSS Code zu abstrahieren, aber gebe dir dir nachfolgend trotzdem ein paar Tipps:

- Vereinfache deinen Code. Isoliere den problematischen Part und lass alles weg, was nicht dazu gehört.
- Wenn du innerhalb einer HTML-Struktur für Parent und Child CSS-Hover-Effekte anlegst, kann das zu Problemen führen.
- Wenn du in JavaScript für Parent und Child Events festlegst, kann das zu Problemen führen. Stichwort Event-Bubbling.

Und räume um Himmels Willen dein JS auf. Wenn du schon jQuery einsetzt, brauchst du das nicht noch in Funktionen zu kapseln. Anstatt setTimeout + css() kann man animate() einsetzen, falls es ein display:none statt visibility:hidden auch tun sollte, wäre fadeOut() eventuell eine Option und verwende Eventhandler statt Inline JS, also bsw.

$(''#Personen').on('mouseout', function() {...})
oder
$('#Personen').hover(.....)
 
Noch eine frage ist es sinfoll gleich alles mit javascript zu schreiben?

Achkja und danke für deine tipps werde das mal versuchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben