按钮悬停在不断变化的背景上答案

【问题标题】：Button hover on a changing background按钮悬停在不断变化的背景上
【发布时间】：2016-08-11 04:51:40
【问题描述】：

我正在为一个朋友创建一个网站，但由于我还是一个初学者，所以我不知道如何进行。我正在用他的名字和一个输入按钮制作一个简单的介绍页面。 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;

}

【问题讨论】：

标签： html css hover

【解决方案1】：

用下面的代码更新就好了，我刚刚添加了内部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;

}

【讨论】：

jsfiddle.net/9sLqwmdx/10 效果和我的一样，只有第一个悬停了
我不这么认为，它在小提琴中对我来说工作正常，只需重新检查并关闭我忘记做的脚本标签。
嗯，您点击了我与您的编辑链接的那个？它已关闭脚本并全部关闭
不用等我看到了，我已经在 javascript 控制台上添加了它，而你的在 html 控制台上！
是的，只需在 head 标签中添加脚本......它会正常工作。

【解决方案2】：

快速看一下，原因是你实际上有 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>

将标注部分自然地放置在背景图像上，您就可以开始了。

【讨论】：

嗯，我正在尝试标注上的绝对位置和相对于背景图像的位置，但它只是提供了标题和按钮，但没有背景
我的 div 背景使用位置绝对 css，所以如果我更改其中任何一个，它就会与背景混淆
是的，但我的图像不会循环，除非它们的 div 设置为绝对位置：/
我不会在最后编写代码，但只需将您的 bg 图像绝对定位在包含的元素中，您就可以开始了。
感谢您的帮助，但我不只是得到它，如果我将任何图像属性移动到另一个包含元素的背景图像停止显示

【解决方案3】：

我已经检查了您的代码并尝试调试问题。问题主要来自您的动画代码。尝试重写你的动画代码。我已经测试了它删除动画代码，以检查悬停是否正常工作，并且工作正常。您的动画代码还有一个错误，它使 Enter 按钮在第一次动画迭代后消失一段时间，然后在几秒钟后再次出现。

如果可能，请尝试使用 JQuery，因为它可以让您更轻松地使用动画。例如，可以简单地将fadeIn(); 和fadeOut(); 函数用于您在CSS 动画代码中所做的动画。

【讨论】：