问题分离div，影响其他div的类

时间：2016-09-24 23:18:34

标签： javascript jquery html css css3

我有一个noob问题，我已经疯了。所以我在另一个div下面有一个div，它们似乎是分开的但是顶级div的类正在影响它下面的div。有没有办法结束div或类似的东西。继承人我得到了什么。菜单中的最后一个按钮，即联系人按钮，有一个更改悬停背景的类，当我将鼠标悬停在表单上时，它对下面的表单div具有相同的效果。

我会永远感激回答。

<html>
</head>
<style>

/*image scaling*/
.fix{ position:fixed;}
/*text fade into center***************************/

.animated{

-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;  
}

.animated3{

 -webkit-animation-fill-mode:both;
 -moz-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 -o-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 -ms-animation-duration:1s;
 -o-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
 -ms-animation-delay:1s;
  -o-animation-delay:1s;
   animation-delay:1s;   
 }

 @-webkit-keyframes fadeInLeft {
 0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
 }  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
 }
 }

 @-moz-keyframes fadeInLeft {
 0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
 }

100% {
    opacity: 1;
    -moz-transform: translateX(0);
}
}

@-o-keyframes fadeInLeft {
0% {
    opacity: 0;
    -o-transform: translateX(-20px);
}

100% {
    opacity: 1;
    -o-transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(-20px);
}

100% {
    opacity: 1;
    transform: translateX(0);
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeOutLeft {
0% {
    opacity: 1;
    -webkit-transform: translateX(0);
}

100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
}
}

@-moz-keyframes fadeOutLeft {
0% {
    opacity: 1;
    -moz-transform: translateX(0);
}

100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
}
}

@-o-keyframes fadeOutLeft {
0% {
    opacity: 1;
    -o-transform: translateX(0);
}

100% {
    opacity: 0;
    -o-transform: translateX(-20px);
 }
}

@keyframes fadeOutLeft {
0% {
    opacity: 1;
    transform: translateX(0);
}

100% {
    opacity: 0;
    transform: translateX(-20px);
}
}

 .fadeOutLeft {
 -webkit-animation-name: fadeOutLeft;
 -moz-animation-name: fadeOutLeft;
 -o-animation-name: fadeOutLeft;
 animation-name: fadeOutLeft;
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-ms-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;  
 }



 /*initial text on page
 load/////////////////////////////////////////////////*/
.container {position: fixed; top: 25%; left: 10%; z-index:-2; 
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeinleft {from 
{ transform:translateX(-30px)} to {        
 transform:translate(0px)}} 

.fade-in {
opacity:0; 
-webkit-animation:fadeIn ease-in 1;  
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;

 -webkit-animation-fill-mode:forwards;
 -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

-webkit-animation-duration:1s;
-moz-animation-duration:1s;
 animation-duration:1s;}

.fade-in:hover{
 opacity:0; 
 -webkit-animation:fadeIn ease-in 1;  
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;

-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;

}
.fadeout{
   opacity: 1;
  transition: opacity .25s ease-in-out;
 -moz-transition: opacity .25s ease-in-out;
 -webkit-transition: opacity .25s ease-in-out;}
 .fadeout:hover{opacity :0;}


 .box{
 width: 500px;
 height: 500px;
 position: relative;
 margin-top: 10%;
 float: left;
 background: transparent;
  font-size:50px;
  font-family:"Gill Sans", "Gill Sans MT", 
  "Myriad Pro", "DejaVu Sans    Condensed", Helvetica, Arial, sans-serif;
  text-shadow: 2px 1px black;
  color:grey;
   }
  /*underline*//////////////////////////////////////
  .underlined-example {
 background-color: transparent;
 position:fixed;
}

.underlined-example {
 position: relative;
 color: gray;
 text-decoration: none;
 font-size: 12px;
 font-weight:bold;
 display:inline;

}

.underlined-example:hover {
color: gray;
}

.underlined-example:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: blue;
visibility: hidden;

-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
 transition: all 0.2s ease-in-out 0s;

-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-o-transform: scaleX(0);
 transform: scaleX(0);
 }

.underlined-example:hover:before {
 visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
/*dropdown  
menu.............................................*/

ul#mainNav > li {
float:left;
display:inline;
position:relative;
background-color:transparent;
cursor: pointer;
margin: 32px;
margin-top:-30;
}
.contain{
max-width:1300px;
min-width:1300px;

}
 ul#mainNav > li:hover {
 background:transparent;
 color:gray;
 cursor: pointer;

 }
 ul#mainNav > li:hover ul {
 visibility: visible;
 opacity: 1;
 transition-delay: 0s, 0s;
 } 
 ul#mainNav li ul {
 position:absolute;
 float:left;
 height:0;
 padding:15px 0px; 
 margin:0 ;
 min-height: 300px;
 min-width:100px;
 visibility: hidden;
 opacity: 0;
 transition-property: opacity, visibility;
 transition-duration: .4s, 0s;
 transition-delay: 0s, .4s;
 line-height: 2;
 }
 ul#mainNav ul li {   
 background-color:transparent;
 }
 ul#mainNav ul li:hover {
 color:gray;
  }
 .bg1:hover:after{
  content:'';
 position: fixed;
 Z-INDEX:-2;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
  background:url(http://
  www.jewelsanddiamonds.com/wp-   
  content/uploads/178482443.jpg) no-repeat   center;
  background-size:cover;
 -webkit-animation: fadeInLeft ;
    -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
  -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  


}
.bg2:hover:after{
content:'';
Z-INDEX:-2;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://d2aun19a9a38r2.cloudfront.net/
content-  root/engagement/herStyle/ringsToSuitMyFinger.cdo/images
/201601061520/
HS_EngagementGuide_HERSTYLE_WhatRingStyleWillSuitMyFinger.jpg)  
 no-repeat    center;
background-size:cover;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
 -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;   
}
.bg3:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(
http://legacyfinejewelers.com/wp-     
content/uploads/2014/04/jewelry-    background.jpg) 
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
  -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  
}

.bg4:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://images.askmen.com/1080x540/style/watch_snob/
status-    symbol-watches-1107395-TwoByOne.jpg) no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
  -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  
}
.bg5:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://www.gia.edu/images
/74357_636x358_1355954767006.jpg)       no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
    -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;    
}
.bg6:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://www.diamondjewelers.net/data/solder.jpg) 
no-repeat        center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
 -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  
}
.bg7:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://static1.squarespace.com
/static/55bb8a28e4b06ac0de4a4505/t/55cb5a9ae4b00b8482057f1f/1439390362391/) 
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
 -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;    
}
.bg8:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(gif2.gif) no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
 -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  
}
.bg9:hover:after{
content:'';
position: fixed;
Z-INDEX:-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(http://
legacyfinejewelers.com/wp-    
content/uploads/2014/04/jewelry-
background.jpg) 
no-repeat center;
background-size:cover;
line-height: 2;
-webkit-animation: fadeInLeft ;
   -moz-animation: fadeInLeft ;
    -ms-animation: fadeInLeft ;
     -o-animation: fadeInLeft ; 
        animation: fadeInLeft ;
 -webkit-animation-duration:1.3s;
    -moz-animation-duration:1.3s;
     -ms-animation-duration:1.3s;
      -o-animation-duration:1.3s;
         animation-duration:1.3s;  
}
/*img size logo/////////////////////////////////////////*/
.logo{
margin-left:38%;
margin-right:40%;
pointer-events:none;
z-index:9999999;
}
/*page load up fades in////////////////////////////////////////////*/
.pageload{ 

-webkit-animation: fadein 1s;
   -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
     -o-animation: fadein 1s; 
        animation: fadein 1s;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
 /*111111111111111111
 11111111111111111111111111111
11111111111111111111111111111111111111111111*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

}

#feedback-page{
text-align:center;
}

#form-main{
width:100%;
float:left;
padding-top:0px;
}

#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}

.feedback-input {
color:#3c3c3c;
 font-family: Helvetica, Arial, sans-serif;
 font-weight:500;
 font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
   margin-bottom: 10px;
  width:100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
    box-sizing: border-box;
   border: 3px solid rgba(0,0,0,0);
 }

.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}

.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}

textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}

#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}

#button-blue:hover{
 background-color: rgba(0,0,0,0);
 color: #0493bd;
 }

.submit:hover {
color: #3498db;
}

 .ease {
 width: 0px;
 height: 74px;
 background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
    transition: .3s ease;
}

 .submit:hover .ease{
   width:100%;
   background-color:white;
 }

  @media only screen and (max-width: 580px) {
    #form-div{
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
 }


 </style>
 <div class="fix pageload">
 <body>
 <div class="logo">
 <img src="logo.png"width="320" >
 </div>
  <div style="z-index:10;" class="contain">
 <ul id="mainNav">
 <li class="bg1 underlined-example" href="">JEWELRY</l>
     <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
 </li> 
 <li href="" class="bg2 underlined-example">ENGAGEMENT</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg3 underlined-example">DIAMONDS</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg4 underlined-example">WATCHES</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg5 underlined-example">CUSTOM CAD</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg6 underlined-example">REPAIR</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg7 underlined-example">APPRAISAL</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li href="" class="bg8 underlined-example">OUR COMPANY</l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
</li>
 <li><a href="/webroot/contact page/contact.html" class="
  bg9 underlined-example">CONTACT </l>
    <ul>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
       <li href="" class="underlined-example">OUR COMPANY</l>
    </ul>        
 </li>
  </div>
 </div>

上面的div有一个名为bg9的类，它会影响下面的div！             

  <p class="name">
    <input name="name" 
  type="text"                              
  class="validate
   [required,custom
   [onlyLetter],
   length[0,100]] 
  feedback-input" placeholder="Name" id="name" />
  </p>

  <p class="email">
    <input name="email" type="text" class="validate[required,  
  custom[email]]       feedback-input" id="email" placeholder="Email" />
  </p>

  <p class="text">
    <textarea name="text" class="validate[required,length[6,300]] 
    feedback-    input" id="comment" placeholder="Comment"></textarea>
   </p>


  <div class="submit">
    <input type="submit" value="SEND" id="button-blue"/>
    <div class="ease"></div>
  </div>
 </form>
 </div>
 </div>
 </body>

1 个答案:

答案 0 :(得分：0)

菜鸟错了你，忘了广告

</a>

在菜单中链接的末尾。谢谢大家

相关问题
最新问题