1

正如我的标题所解释的，我有一个正在使用的背景图像，当我将鼠标悬停在页面某个区域的 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>
4

3 回答 3

0

这应该有效：

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' ); }
于 2012-09-09T23:02:11.660 回答
0

您可以使用 CSS 和 jQuery。

更新您的 HTML 以使用指向默认图像的默认类，在下面的示例中home：

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

使用类似于下面的 CSS 样式来定义所需的图像：（
您可以忽略我使用的样式，#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");
});​

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

于 2012-09-09T23:02:52.140 回答
0

基于以下功能的简单 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, '');
    }
}
于 2012-09-09T23:32:09.453 回答