在javascript或jquery中将鼠标悬停在子div上更改父div的背景图像时出现问题

正如我的标题所解释的，我有一个正在使用的背景图像，当我将鼠标悬停在页面某个区域的某个div上时，我希望它发生变化

目前我的

#main

背景图像是

4Era#u home.jpg

，当我将鼠标悬停在

#tv

上时，我希望该背景图像更改为

4Era#u home_tv.jpg

我希望这是有意义的，因为我一直在网上寻找，但无法找到一个可行的解决方案。我知道css对此不起作用，所以任何关于jquery或javascript的帮助都会有所帮助

<div id="main">
    <div id="television">
        <a href="#" id="tv_glow">test</a>
    <div>
</div>

这应该可以：

var child = $( '#television' ),
    parent = child.parent();

child.hover( function(){
  parent.addClass( 'tv-image' );
}, function(){
  parent.removeClass( 'tv-image' );
});

CSS

---

您可以使用CSS和jQuery

在下面的示例

home

中，更新HTML以使用指向默认图像的默认类：

<div id="main" class="home">
    <div id="television">
        <a href="#" id="tv_glow">television test</a>
    <div>
</div>​

使用jQuery

toggleClass（）

切换类，如下所示：

$("#television").hover(function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
}, function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
});​

---

-在父元素中切换背景图像基于以下函数的简单javascript解决方案是：

<a onmouseover="util.addClassName('main', 'tv-glow');"
   onmouseout="util.removeClassName('main', 'tv-glow')"
   href="...">test</a>

---

你必须备份

css类不起作用

，因为css是解决方案的一大部分。我不确定你所说的

是什么意思，我知道css不起作用。这是否意味着你不想使用CSS，或者你已经尝试了一个CSS唯一的解决方案，但它不起作用？通常，您会使用CSS来指定图像的位置。然后，您可以根据需要使用jQuery在类之间切换。我的意思是，在我的研究过程中，在大多数情况下，我找到的具有潜在解决方案的网站都表示，单靠CSS是无法实现的。我还在演示中的
main
和
TV
div中添加了一些边框样式。这就更清楚地表明，正是
电视
div将鼠标悬停在上方以替换父对象中的图像。只是为了澄清，为了使用你的图片，只需根据需要替换样式中的url值，在演示过程之外使用你的url值是行不通的。不知道为什么，但对我来说就是行不通。我写的和你一样，但我一定是遗漏了什么。我只是把网页上传到服务器上，这样你就可以查看我所有的代码。我在你身上遗漏了什么？“test”所在的小区域是我希望悬停在上面以更改您在红色div中看到的背景图像的地方。@romclblu01:打开您的broswer调试工具，您可以在控制台中看到脚本错误<代码>语法错误：非法字符}）。您的脚本代码看起来正好在第23行和第31行之间，但是，
newHome
文件中的某些内容弄乱了语法。嘿，Francois，非常感谢您的帮助，我还有最后一个问题，您不必回答，因为您已经做了大量的帮助，但我只是想知道，如果要对本页上其他具有特定背景的div重复相同的过程，我是否只是将代码复制并通过脚本，但更改div名称？比如，我不想在home_tv.jpg上，而是想在shirt div上悬停，让BG变为home_shirt.jpg。
$("#television").hover(function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
}, function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
});​

<a onmouseover="util.addClassName('main', 'tv-glow');"
   onmouseout="util.removeClassName('main', 'tv-glow')"
   href="...">test</a>

var util = util || {};

util.hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

util.addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!util.hasClassName(el, cName)) {
        el.className = el.className + ' ' + cName;
    }
}

util.removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (util.hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = el.className.replace(re, '');
    }
}