変化する背景にボタンを置く

私は友人のウェブサイトを作っていますが、まだ初心者ですから、どのように進むべきかはわかりません。私は彼の名前と入力ボタンで簡単なイントロページを作っています。 Enterボタンにはホバー機能があり、その上にマウスを置くと色が変わりますが、5つの異なる背景を繰り返すバックグラウンドのdivループがあります。マイボタンとそのホバー機能は、最初の背景画像で正常に機能しますが、ホバー機能が変更されると、最初の画像に戻るまで機能しなくなります。変化する背景にボタンを置く

バックグラウンドの変更は、私がここで見つけたCSSコードですが、他のものはすべて作っています。

ここに私のCodeと私が働いているものはです。

ボタンのホバーがすべての背景で機能しない理由はありますか？

HTML

<body class="intro-body"> 
    <div id="background-change"> 
     <div class="background-image image1"> 
      <h1 class="intro-title">Name Here</h1> 
      <p class="intro-button intro-button-hover">Enter</p> 
     </div> 
     <div class="background-image image2"> 
      <h1 class="intro-title">Name Here</h1> 
      <p class="intro-button intro-button-hover">Enter</p> 
     </div> 
     <div class="background-image image3"> 
      <h1 class="intro-title">Name Here</h1> 
      <p class="intro-button intro-button-hover">Enter</p> 
     </div> 
     <div class="background-image image4"> 
      <h1 class="intro-title">Name Here</h1> 
      <p class="intro-button intro-button-hover">Enter</p> 
     </div> 
     <div class="background-image image5"> 
      <h1 class="intro-title">Name Here</h1> 
      <p class="intro-button intro-button-hover">Enter</p> 
     </div> 
    </div> 
</body>

CSS

.intro-body { 
    text-align: center; 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.intro-title { 
    padding-top: 20vh; 
    padding-bottom: 5vh; 
    font-size: 650%; 
    text-transform: uppercase; 
    text-align: center; 
    color: white; 
    letter-spacing: 5px; 
    text-shadow: 2px 2px black; 
} 

.intro-button { 
    border: solid; 
    color: white; 
    padding: 20px 45px; 
    display: inline-block; 
    letter-spacing: 2px; 
    text-align: center; 
    text-transform: uppercase; 
    cursor: pointer; 

} 

p.intro-button-hover:hover { 
    background-color: white; 
    opacity: 0.85; 
    padding: 23px 48px; 
    letter-spacing: 2px; 
    text-align: center; 
    text-transform: uppercase; 
    color: black; 
    border: unset; 
    cursor: pointer; 
} 

.background-image { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

.image1{ 
    background: url("http://placekitten.com/1200/1200") no-repeat center fixed; 

} 

.image2{ 
    background: url("http://placekitten.com/1200/1300") no-repeat center fixed; 
} 

.image3{ 
    background: url("http://placekitten.com/1300/1200") no-repeat center fixed; 
} 

.image4{ 
    background: url("http://placekitten.com/1300/1300") no-repeat center fixed; 
} 

.image5{ 
    background: url("http://placekitten.com/1300/1400") no-repeat center fixed; 
} 

@keyframes backgroundchangeFadeInOut { 
    0% { 
    opacity:1; 
    } 
    17% { 
    opacity:1; 
    } 
    25% { 
    opacity:0; 
    } 
    92% { 
    opacity:0; 
    } 
    100% { 
    opacity:1; 
    } 
} 

@-webkit-keyframes backgroundchangeFadeInOut { 
    0% { 
    opacity:1; 
    } 
    17% { 
    opacity:1; 
    } 
    25% { 
    opacity:0; 
    } 
    92% { 
    opacity:0; 
    } 
    100% { 
    opacity:1; 
    } 
} 
#background-change div:nth-of-type(1) { 
    animation-delay: 20s; 
    -webkit-animation-delay: 20s; 
} 
#background-change div:nth-of-type(2) { 
    animation-delay: 15s; 
    -webkit-animation-delay: 15s; 
} 
#background-change div:nth-of-type(3) { 
    animation-delay: 10s; 
    -webkit-animation-delay: 10s; 
} 
#background-change div:nth-of-type(4) { 
    animation-delay: 5s; 
    -webkit-animation-delay: 5s; 
} 

#background-change div:nth-of-type(5) { 
    animation-delay: 0s; 
    -webkit-animation-delay: 0s; 
} 

#background-change div { 
animation-name: backgroundchangeFadeInOut; 
animation-timing-function: ease-in-out; 
animation-iteration-count: infinite; 
animation-duration: 25s; 

-webkit-animation-name: backgroundchangeFadeInOut; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-duration: 25s; 

}

出典

2016-08-11 RiGid

次のコードで更新するだけで、内部jsを追加しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("p").mouseover(function(){ 
    $("p").css("background-color", "white"); 
}); 
$("p").mouseout(function(){ 
    $("p").css("background-color", ""); 
    $("p").css("color", "black"); 
});

}）;

とCSSで '//' でプロパティを削除します。

p.intro-button-hover:hover { 
// background-color: #fff; 
//opacity: 0.4; 
padding: 23px 48px; 
letter-spacing: 2px; 
text-align: center; 
text-transform: uppercase; 
//color: black; 
border: unset; 
cursor: pointer;

}

出典

2016-08-11 06:07:32

https://jsfiddle.net/9sLqwmdx/10/それは同じ効果を行うの表示を停止します私が持っていた人のように、最初の人だけがホバーを得ます。 – RiGid

私はそうは思わない、フィディードで私のために働いていて、再チェックして、忘れたスクリプトタグを閉じてください。 –

ええと、編集したリンクをクリックしましたか？それは、スクリプトが閉じているとすべての – RiGid

はすぐにこれを見て、その理由は、あなたが実際に物事を台無しにされ、中とフェードアウト5種類のボタンを持っているということです。

は、当然のことながら、背景画像の上に吹き出し部分を配置し、あなたが行ってもいいです。このような何か（擬似コード）

<body class="intro-body"> 
    <div id="callout"> 
    <h1 class="intro-title">Name Here</h1> 
    <button class="intro-button intro-button-hover">Enter</button> 
    </div> 
    <div id="background-change"> 
    <div class="background-image image1"></div> 
    <div class="background-image image2"></div> 
    <div class="background-image image3"></div> 
    <div class="background-image image4"></div> 
    <div class="background-image image5"></div> 
    </div> 
</body>

を行います。

出典

2016-08-11 05:07:08 jakee

私はコールアウトとバックグラウンドイメージに相対的な位置に絶対的な位置をしようとしていますが、タイトルとボタンが表示されますが背景は表示されません。 – RiGid

私のdiv背景は絶対座標を使用します。それは背景と混乱している – RiGid

あなたはこのようなものが必要になります：https：// jsfiddle。net/k4thmbfj/ – jakee

私はあなたのコードを経て、問題をデバッグしようとしています。問題はほとんどあなたのアニメーションコードからです。アニメーションコードを書き直してみてください。私はアニメーションコードを削除して、ホバーが正常に動作しているかどうかを確認し、うまく動作するかどうかをテストしました。ボタンを最初のアニメーション反復後にしばらく消えて、数秒後に再び表示されるアニメーションコードのバグもあります。

可能であれば、アニメーションを使用しやすくするために、JQueryを試してみてください。たとえば、CSSアニメーションコードで行っていたアニメーションには、単にfadeIn();とfadeOut();の関数を使用できます。

出典

2016-08-11 07:06:50

変化する背景にボタンを置く

答えて

関連する問題