当悬停在链接上时，背景图像会发生变化，希望图像保留，直到其他链接悬停

时间：2016-08-14 00:13:53

标签： javascript jquery css hover state

此处代码.bg1类包含图像，当应用于链接时，悬停会覆盖带有图像的背景，我要问的是如何保留该背景图像，直到其他项目悬停为止。

<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:'';
z-index: -1;
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;


}

>/*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; }

 >/*11111111111111111111111111111111111111111111111111111111111111*/


</style>

<div class="pageload">
<body>
<script>

</script>

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

</body>
</html>

1 个答案:

答案 0 :(得分：0)

好的，结果我犯了一个新手的错误，男孩是愚蠢的。谢谢大家的时间帮助。

我需要做的就是改变z-index的顺序，所以当我在链接上盘旋时，图像仍然在其z-index下面的任何项目上，然后通过对其他链接应用更高的z-index评级，在悬停期间，它会改变。这可能不是最有效的方法，但它工作正常。我对网络开发比较陌生。

相关问题
最新问题