0
친구를위한 웹 사이트를 만들고 있습니다. 아직 초보자이므로 진행 방법을 잘 모르겠습니다. 나는 그의 이름과 입력 버튼으로 간단한 소개 페이지를 만들고 있습니다. Enter 버튼에는 마우스를 가져 가면 색상이 바뀌는 호버 기능이 있습니다. 반면에 배경색이 다른 div 루프를 사용하여 5 가지 배경을 반복합니다. 내 단추 및 그 호버 기능은 첫 번째 배경 그림에서 잘 작동하지만 호버 기능이 변경되면 맨 처음 그림으로 돌아올 때까지 더 이상 작동하지 않습니다.변화하는 배경에 버튼을 올려 놓습니다.
백그라운드 변경은 내가 다른 모든 것을 만들었을 때 스택에서 찾은 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;
}
https://jsfiddle.net/9sLqwmdx/10/ 동일한 효과가 있습니다. 내가 가지고있는 사람과 마찬가지로 첫 번째 사람 만이 호버를 얻는다. – RiGid
나는 그렇게 생각하지 않는다. 바이올린에서 나를 위해 잘 작동한다. 그냥 잊어 버린 스크립트 태그를 다시 확인하고 닫는다. –
흠, 내가 편집 한 것과 연결된 링크를 클릭하셨습니까? 그것은 스크립트가 닫혀 있고 모두 – RiGid