Question

我正在尝试为首页编写菜单，当项目悬停时，背景div的背景图像会发生变化。

我有三个主要文件创建这个效果，menuFunction.php，它包含在头文件中，因此它不是链接问题，然后是index.php，最后是我的样式表。

以下是menuFunction.php文件中的一个菜单项功能的示例：

<script>
$(document).ready(function () {
    $(".resume").hover(function () {
        $(".backgroundImage").css("background", "url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg)");
    });
    $(".resume").mouseleave(function () {
        $(".backgroundImage").removeAttr('style');
    });
});
</script>

现在这里是index.php中提到的地方：

<div id="photoBackground" class="backgroundImage">

<div id="menuWrap">
 <ul id="menu">
  <li id="menuResume" class="resume"><a href="http://www.vhawley.com/resume">Resume</a></li>
   <li id="menuAbout" class="about"><a href="http://www.vhawley.com/about">About</a></li>
    <li id="menuGallery" class="gallery"><a href="http://www.vhawley.com/gallery">Gallery</li>
     <li id="menuContact" class="contact"><a href="http://www.vhawley.com/contact">Contact</li>
 </ul>
</div>
</div>

请注意，menuFunctions.php中提到的类也在相应的li中提及。

现在，我可以通过我的样式表来定义背景具有#photoBackground的以下属性

#photoBackground{
height:450px;
width:100%;
background-image:url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuDefault.jpg);
background-repeat:no-repeat;
background-position:center;
}

最后，我现在要完成的是让其余的工作，但即使我在CSS中使用类.resume，它也不起作用，即使我使用div #menuResume，也没有运气。我一直在尝试，并试图推迟在这一方面寻求帮助，但我真的被卡住了。我真的没有JQuery经验，只有CSS，HTML 5和一些PHP，通常如果你能掌握它们，它们可以独自建立一个像样的网站。直到你想得到这样的幻想。

有什么想法吗？

修改将JQuery变量链接到CSS是一个问题，它与更改背景无关，因为正如Popnoodles在JSFiddle上证明的那样，没有任何问题。

Answer 1

这样做的最佳方法是普通css

.resume #photoBackground {
  ...
}

.resume:hover #photoBackground {
  ... new image
}

Answer 2

您可以使用css：hover选择器执行此操作。但是，如果你想使用jQuery，你需要更改.css（＆＃39; background＆＃39; ...到.css（＆＃39; background-image＆＃39; ...

这是小错误，最让我们失望。

编辑以澄清您的错误：

背景样式会覆盖所有内容，包括背景重复和背景位置，因此这些都已消失。如果您使用背景图像，它将不会覆盖其他css选项。

<script>
$(document).ready(function () {
    $(".resume").hover(function () {
        $(".backgroundImage").css("background-image", "url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg)");
    });
    $(".resume").mouseleave(function () {
        $(".backgroundImage").removeAttr('style');
    });
});
</script>

Answer 3

我会研究spriting来保存一些图像加载，但这会使背景图像容器的固定或已知高度重新出现。我也会使用以下代码而不是为每个菜单项连接一个处理程序：

<强> HTML

<div id="photoBackground" class="backgroundImage">
    <div id="menuWrap">
        <ul id="menu">
            <li id="menuResume" class="resume"><a href="http://www.vhawley.com/resume">Resume</a>
            </li>
            <li id="menuAbout" class="about"><a href="http://www.vhawley.com/about">About</a>
            </li>
            <li id="menuGallery" class="gallery"><a href="http://www.vhawley.com/gallery">Gallery</a>
            </li>
            <li id="menuContact" class="contact"><a href="http://www.vhawley.com/contact">Contact</a>
            </li>
        </ul>
    </div>
</div>

<强>脚本

//Save looking up background container each time    
var background = $("#photoBackground");

$("#menu li").hover(
//Hanldes Mouse Enter
function () {
    var cssClass = $(this).attr('class');
    $(background).addClass(cssClass);
},
//Handles Mouse Exit
function () {
    var cssClass = $(this).attr('class');
    $(background).removeClass(cssClass);
})

<强> CSS

.backgroundImage {
    background-image:url(http://www.vhawley.com/wp-content/themes/vhawleycomtheme/css/style/images/menuResume.jpg);
}
.backgroundImage.resume {
    background-position:left -100px;
}
.backgroundImage.about {
    background-position:left -200px;
}
.backgroundImage.gallery {
    background-position:left -300px;
}
.backgroundImage.contact {
    background-position:left -400px;
}

这也通过改变背景图像的偏移来演示spriting的原理。当然，您可以随时更改背景图片。

Demo

无法通过CSS访问JQuery

3 个答案: