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:
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"});
}