CSS Webkit mehrere Elemente

html.de-Forum HTML, XHTML & CSS
1

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);

} [/CODE]

[HTML]


            <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>[/HTML]

[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“});

}

[/PHP]

2

Ich verstehe die Frage nicht. Du kannst jedes Element per CSS und jQuery ansteuern.

3

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

4

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(…)

5

Noch eine frage ist es sinfoll gleich alles mit javascript zu schreiben?

Achkja und danke für deine tipps werde das mal versuchen