将鼠标悬停在javascript或jquery中的子div上，无法更改父div的背景图片

Question

就像我的标题所解释的那样，我有一个正在使用的背景图像，并且当我将鼠标悬停在页面特定区域中的div上时，希望更改它。

目前，我#main背景图片是4Era_home.jpg ，当我将鼠标悬停在#television我希望该背景图片更改为4Era_home_tv.jpg 。

我希望这是有道理的，因为我一直在网上寻找，但找不到可行的解决方案。 我知道CSS对此不起作用，因此对此jQuery或javascript的任何帮助都将有所帮助。

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

Answer 1

这应该工作：

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

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

的CSS

.tv-image { background-image: url( 'path/to/4Era_home_tv.jpg' ); }

Answer 2

您可以使用CSS以及jQuery。

更新HTML以使用指向默认图像的默认类，如示例home ：

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

使用与以下类似的CSS样式来定义需求图像：
（您可以对我在#main使用的样式进行#main它们仅用于DEMO，您感兴趣的样式是.home和tv ）

#main{
  background-repeat:no-repeat;
  text-align: center; 
  width:200px;
  height:200px;
}

.home
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Eraser.png');
}

.tv
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Ok.png');
}

使用jQuery toggleClass()切换类，如下所示：

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

演示 -在父元素中切换背景图像

Answer 3

基于以下功能的简单javascript解决方案是：

<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, '');
    }
}