背景图像在链接上悬停时发生变化，希望图像保持不变，直到其他链接悬停
Background image changes when hovering on link, want image to remain, until other link is hovered
这里的代码，.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>
好吧，原来我犯了一个新手犯的错误，太蠢了。谢谢大家的帮助。
我所需要做的就是改变z-index的顺序，所以当我将鼠标悬停在一个链接上时，图像会停留在低于其z-index的任何项目上，然后通过对其他链接应用更高的z-index评级，在悬停期间它会改变。这可能不是最有效的方法，但效果很好。我对网络开发相对来说还是个新手。
相关文章：
- 链接don'由于Javascript悬停效果，无法在移动设备上工作
- 链接悬停css在不浮动时不在表浮动标题中工作
- 有没有一种方法可以让链接不可点击，但仍然可以使用:悬停
- 悬停时将一个链接更改为两个
- 当主导航链接悬停时，在侧菜单中显示链接
- 淡入淡出链接悬停不起作用
- 以即时点击样式执行 PJAX 调用(仅在链接悬停时加载所需的内容）
- 导航栏:在显示子菜单后保持链接悬停
- 元素之间的链接悬停
- CSS/JQuery 链接悬停不会触发
- 在链接悬停时更改背景图像
- 当链接悬停时创建一个弹出窗口，就像在facebook中一样，当你把光标放在链接上时，它会显示发送消息等选项
- 添加新的按钮/链接悬停在剑道网格上
- jQuery淡出图像的链接悬停
- 背景图像在链接上悬停时发生变化，希望图像保持不变，直到其他链接悬停
- 使用javascript而不是css添加链接悬停颜色
- 当页面包含asp.net ajax更新面板时，css链接悬停和javascript不工作
- 在链接悬停时更改另一个图像
- 更改图像链接悬停在文本列表
- 更改链接悬停背景颜色时遇到麻烦
