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上使用他们仅用于演示的样式，你感兴趣的样式是.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");
});

DEMO - 切换父元素

中的背景图像

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

麻烦通过将鼠标悬停在javascript或jquery中的子div来更改父div的背景图像

3 个答案:

DEMO - 切换父元素