悬停更改背景但也使链接消失

时间：2016-08-17 01:05:27

标签： javascript jquery html css

我非常需要这段代码的帮助。 我创建了一个类并将其分配给一个链接，当链接悬停时，类导致整个背景改变，问题是，链接消失。我需要保留背景，直到其他东西悬停，z-index适用于此，但它也是问题的原因。 

<html>
<head>
<script type="text/javascript"     src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
</head>
<style>

/*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;
margin-left:283px;

}
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;
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:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
   animation-duration:1s;  

}
 .bg2:hover:after{
content:'';
position: fixed;
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:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;  
}
.bg3:hover:after{
content:'';
position: fixed;
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:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;  

}


/*img size logo/////////////////////////////////////////*/

.logo{
padding:0 0 0 780px;
position:relative;
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; }

    /*111111111111111111111111111111111111111111111111111111111111*/

 </style>
<div class="pageload">
<body>

 <div class="logo">
<img src="C:\Users\executive jewelry\Desktop\SITE\logo.png"width="320" >
</div>
<div 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="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="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="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="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="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="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 href="" class="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 class="container box animated fadeInLeft">
     FOR OVER 30 YEARS, EXECUTIVE JEWELERS
  </div>

  </body>
</html>

0 个答案:

没有答案
相关问题
最新问题