1
ここでコードは.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>
あなたのCSSコードを投稿 – mlegg
あなたは「私はリンクにクラスを追加しました」と言います。どのようなリンク？ – Makyen
あなたはこのために最も無関係のコードを投稿しました。あなたのCSSコードとあなたのjqueryを投稿してください。 –