无法通过 CSS 访问 JQuery

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中使用class.resume，它也不起作用，即使我使用div#menuResume，运气也不好。我一直在努力，并试图推迟在这件事上寻求帮助，但我真的陷入了困境。我真的没有JQuery的经验，只有CSS、HTML5和一些PHP，通常如果你能掌握它们，它们就可以单独制作一个不错的网站。直到你想变成这样。

有什么想法吗？

EDIT:将JQuery变量链接到CSS是一个问题，它与更改背景无关，因为正如Popfaced在JSFiddle上所证明的那样，这没有错。

Answer 1

您可以使用css：悬停选择器来完成此操作。但是，如果您想使用jQuery，您需要将.css('background'…更改为.css('background-image'…

最让我们头疼的是那些小错误。

编辑以澄清您的错误：

背景样式覆盖所有内容，包括背景重复和背景位置，因此这些内容都消失了。如果您使用背景图像，它不会覆盖其他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 2

最好的方法是纯css

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

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;
}

这也证明了通过改变背景图像的偏移量来进行喷射的原理。当然，你总是可以改变背景图像本身。

演示