悬停效果在页面加载时非常短暂，但崩溃答案

【问题标题】：hover effect works very briefly on page load but crashes悬停效果在页面加载时非常短暂，但崩溃
【发布时间】：2016-01-05 12:39:15
【问题描述】：

我在悬停效果方面遇到了一些问题。我正在尝试在悬停时更改 div 的背景图像，但它仅在页面加载时悬停在该图像上时才有效，并且一旦您完全移动鼠标，我就会失去效果。

我不知道问题出在 css 中还是脚本中。我已经尝试删除所有脚本，但仍然无法获得预期的效果。背景图像 div 包含在其他几个 div 中。

如果有人想看看我在说什么，我已经将该页面上传到http://www.coyotebyrd.com/ourwork.html。代码如下所示：

<script src="Scripts/jquery-1.11.3.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $("body").css("display", "none");
        $("body").fadeIn(1000);
});

    $(document).ready(function(){
$('a').each(function(index) {
    if(this.href.trim() == window.location)
        $(this).addClass("selected");
});

   $(document).ready(function () {
$("#top").delay(0000).show("slide", { direction: "left" }, 800);
});

   $(document).ready(function () {
$("#bottom").delay(0000).show("slide", { direction: "right" }, 800);
});

   $(document).ready(function() {
        $("#topContainer").css("display", "none");
        $("#topContainer").delay(800).fadeIn(500);
});

   $(document).ready(function() {
        $("#bottomContainer").css("display", "none");
        $("#bottomContainer").delay(800).fadeIn(500);
});

});

    <div id="top">

    <div id="topContainer">

        <div id="webDesign"><a href="webdesign.html" alt="Responsive Web Design" class="webLink"></a></div>
        <div id="photography"><a href="photography.html" alt="Commercial Photography" class="photoLink"></a></div>

    </div> 

    </div>   

#webDesign {width: 50%;
            height: 100%;
            background-image: url(../Images/Undrst8edDesktopScreen.jpg);
            background-size: cover;
            background-position: center-top;
            float: left;
            display: block;

}

#photography { width: 50%;
           height: 100%;
           background-image: url(../Images/commercialPhotographyBW.jpg);
           background-size: cover;
           background-position: center-bottom;
           float: right;
           display: block;

 } 

#webDesign:hover {
                background-image:url(../Images/Undrst8edDesktopScreenColor.jpg);
                display: block;


}

#photography:hover { 
           background-image: url(../Images/commercialPhotographyColor.jpg);
           display: block;


}

【问题讨论】：

标签： css hover background-image

【解决方案1】：

好的。这不起作用的原因是由于 body 属性。
即使 body 的显示设置为“无”，网页中仍然存在，并中断 :hover 事件。
所以，你要做的就是设置 Body 的 Z-index。

body {
    z-index: -1;
}

【讨论】：

谢谢大家！我已经让它工作了。我欣喜若狂地注册了这个网站并且人们非常愿意提供帮助。

【解决方案2】：

我发现了你的错误。这对我有用。在您的<section id="workPage"> 位置设置为相对。 position: relative。如果您将位置设置为其中之一，您将遇到麻烦。 absoluteinheritrelativesticky.

如果您将位置设置为 !important fixed initial static 或 unset 之一将产生悬停效果。试试下面的代码。

#workPage {
  position: unset;
}

或者

您可以更改您的z-index。您当前的 z-index 在<section id="workPage"> 中设置为-1 z-index: -1。将其更改为正值。例如：

#workPage {
 z-index: 1;
}

【讨论】：