Übergang CSS Dauer nicht funktioniert
Ich kann nicht scheinen, um die Dauer übergang arbeiten auf nur eine meiner divs auf meiner Website.
wenn Sie gehen, um die "Kontakt" - Abschnitt, bewegen Sie die Maus über die Karte, die divs übergang feine
wenn Sie den Mauszeiger auf den detail-Abschnitt (der graue Bereich mit den 3 icons) die Umstellung auf das div, wie es Folien, die Links und die inneren div auch.
aber das Kontakt-Formular nicht berührt werden möchte, die der übergang Dauer, rastet es an der linken Seite.
hier ist die Website: http://www.onepixelroom.com/londonrefurb/
hier ist der code:
HTML:
<div id="contact-div">
<div id="contact-title-box">
<div id="contact-title">
<h1>CONTACT</h1>
<hr>
</div>
</div>
<div id="map_canvas-antialiasing"></div>
<div id="sliding-footer">
<div id="map_canvas"></div>
<div id="sliding-second">
<div id="sliding-details">
<div id="sliding-details-container"> <a href="mailto:[email protected]?subject=Web Site Enquiry" style="text-decoration:none">
<div class="sliding-details-box">
<div class="sliding-details-square-hover"></div>
<div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/mail.png"/></div>
<div class="sliding-details-txt">[email protected]</div>
</div>
</a> <a href="skype:0044750221963?call" style="text-decoration:none">
<div class="sliding-details-box">
<div class="sliding-details-square-hover"></div>
<div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/phone.png"/></div>
<div class="sliding-details-txt">+44 07502221963</div>
</div>
</a> <a href="https://maps.google.com/maps?q=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&hl=en&sll=51.487207,-0.177784&sspn=0.012146,0.021801&hnear=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&t=m&z=16" style="text-decoration:none" target="_blank">
<div class="sliding-details-box">
<div class="sliding-details-square-hover"></div>
<div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/home.png"/></div>
<div class="sliding-details-txt">SOUTH KENSINGTON, LONDON UK</div>
</div>
</a> </div>
</div>
<div id="form-container">
<div id="form-wrap">
<form method="post" action="contactengine.php" id="commentForm">
<fieldset>
<div id="formLeft">
<label for="Name"></label>
<div class="input-bg">
<input type="text" name="Name" placeholder="Name" id="Name" />
</div>
<label for="Tel"></label>
<div class="input-bg">
<input type="text" name="Tel" placeholder="Number" id="Tel" />
</div>
<label for="Email"></label>
<div class="input-bg">
<input type="text" name="Email" placeholder="Email" id="Email" />
</div>
</div>
<div id="formRight">
<label for="Message"></label>
</td>
<div class="message-bg">
<textarea name="Message" placeholder="Message" id="Message" rows="20" cols="20" ></textarea>
</div>
<br />
<input type="submit" name="submit" value="Submit" class="submit-button" />
</div>
<div class="clear"></div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>CSS:
#contact-div {
height:760px;
float:left;
margin:0 auto;
width:100%;
}
#contact-title-box
{
height:300px;
position:relative;
}
#contact-title {
top:110px;
position:relative;
}
#contact-title hr {
position:relative;
top:30px;
width: 230px;
margin:0 auto;
border: 0;
height: 1px;
background-color:#49E2D6;
}
#contact-title h1 {
font-family: Raleway, Verdana, sans-serif;
font-size: 50px;
font-weight: 200;
font-style: normal;
letter-spacing: 3px;
color: #3A3A3A;
}
#sliding-footer {
z-index: 0;
height: 450px;
width:100%;
}
#map_canvas-antialiasing {
height:10px;
position:relative;
background-color:#FFFFFF;
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
z-index:3;
}
#map_canvas {
float:left;
width: 100%;
height: 450px;
cursor: url(http://www.onepixelroom.com/londonrefurb/img/cursor.png) 21 26, move;
}
#map_canvas:hover + #sliding-second
{
left:45%;
}
#sliding-second {
background-color: #dce9e8;
position: absolute;
left: 20%;
width: 80%;
height: 450px;
z-index:3;
margin: 0 auto;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
#sliding-details {
width: 700px;
height: 450px;
background-color: #363636;
position: absolute;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
left:-100px;
}
#sliding-details-container {
float: left;
top: 103px;
margin: 0 auto;
width: 400px;
height: 200px;
position: relative;
left:25px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.sliding-details-box:hover .sliding-details-square-hover{
transform: translate(0,-50px);
-webkit-transform: translate(0,-50px);
-o-transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
}
.sliding-details-box {
margin-bottom:50px;
height: 50px;
width: 400px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
overflow:hidden;
}
.sliding-details-box:hover{
cursor: url(http://www.onethousandsheep.com/img/cursor.png) 21 26, move;
}
.sliding-details-square-hover {
float: left;
background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF 50%, #49E2D6 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#FFFFFF), color-stop(50%,#49E2D6));
background: -webkit-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
background: -o-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
background: -ms-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
background: linear-gradient(to bottom, #FFFFFF 50%,#49E2D6 50%);
position: relative;
border: none;
width: 50px;
height: 100px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.sliding-details-img img {
border: none;
position:relative;
top:15px;
width: 20px;
height: 20px;
}
.sliding-details-img {
position:absolute;
width: 50px;
height: 50px;
}
.sliding-details-txt {
z-index: 2;
float: left;
position: relative;
top: 16px;
margin-left: 30px;
width: 300px;
text-align: left;
font-family: 'Droid Sans', serif;
font-size: 14px;
font-weight: 800;
color: #dce0df;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
letter-spacing:2px;
overflow:hidden;
}
#sliding-details:hover + #form-container {
left:600px;
}
#sliding-details:hover #sliding-details-container {
left:14%;
}
#form-container {
background-color: #49E2D6;
height: 450px;
width: 100%;
position:relative;
z-index:3;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
#form-wrap {
width: 1000px;
background-color: #49E2D6;
height: 300px;
position: relative;
margin: 0 auto;
top:85px;
z-index:3;
}Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie festlegen, dass eine erste Links-Wert für
form-container. Wenn es nicht der erste linken-Wert der browser nicht wissen, von wo Sie zu animieren, um die set-hover-Wert.Dies sollte das Problem lösen.
Überprüfen Sie diese