我试图在我的wordpress网站上执行一个单一的JavaScript函数。这个想法是当有人鼠标点击链接（nav. home a）时，导致图像出现在视口div中。我一辈子都不能让这个工作。
这是超文本标记语言：我把它放在样式表和元标记之间的头部
<script type="text/javascript" src="/scriptfile.js"></script>
然后我在视口div中运行脚本：
<div class="viewport">
<script type="text/javascript">
<!--
preview();
//--></script>
</div>
以下是文件（scriptfile.js）：
function preview()
{
var hoverhome = 'url("images/Screen2.png") no-repeat';
var empty = '';
$(document).ready(function()
{
//home
$('nav .home a').mouseover(function(){
$('.viewport').css('background-image', 'url(' + hoverhome + ')');
});
$('nav .home a').onmouseout(function(){
$('.viewport').css('background-image', 'url(' + empty + ')');
});
}
}
主要问题：看起来好像您正试图在元素的css中存储这个“url（url（“images/Screen2.png”）no repeat”。试着这样做：
$('.viewport').css('background-image', hoverhome);
次要问题：要清楚，你不应该在wordpress的主题中使用相对路径！使用这个php函数获取主题根：
get_theme_root();
然后从那里导航到您的javascript文件。
这可能会解决你的问题，它发生了几次我
我不确定你是否能打电话
$(document).ready(function() { }
在页面已经加载之后。试着混合一下你的代码：
$(document).ready(function()
{
var hoverhome = 'url("images/Screen2.png") no-repeat';
var empty = '';
//home
$('nav .home a').mouseover(function()
{
$('.viewport').css('background-image', 'url(' + hoverhome + ')');
});
$('nav .home a').onmouseout(function()
{
$('.viewport').css('background-image', 'url(' + empty + ')');
});
}
我认为只要页面加载时. nav存在，就不需要把函数放在那里。你可以完全移除它。
我认为问题在于jQuery在页面加载时设置了所有内容，因此调用。ready（）方法之后无效。
