Question

我想在这个div中添加背景图片：

<div class="logo-main"></div>

但是我的脚本无效：

<script type='text/javascript'>
$(document).ready(function(){
    var div = $('.logo-main');
    $('.logo-main').hover(function() {
        div.css({ 'background': 'url(images/slides/glare.png)' }); 
        )};
});
</script>

有什么建议吗？

Answer 1

语法错误

$(document).ready(function() {
    var div = $('.logo-main');
    div.hover(function() {
        div.css({
                    'background' : 'url(images/slides/glare.png)'
                        });
            });
});

可以简化为

$(document).ready(function() {
    $('.logo-main').hover(function() {
        $(this).css({
                    'background' : 'url(images/slides/glare.png)'
                });
    });
});

演示：Fiddle

但可能你想要的是

$(document).ready(function() {
    $('.logo-main').hover(function() {
        $(this).css('background', 'url(images/slides/glare.png)');
    }, function(){
        $(this).css('background', '');
    });
});

演示：Fiddle

Answer 2

尝试使用background-image（并替换：with，）..

<script type='text/javascript'>
$(document).ready(function(){
    var div = $('.logo-main');
    $('.logo-main').hover(function() {
        div.css({ 'background-image', 'url(images/slides/glare.png)' }); 
        )};
});
</script>

Answer 3

你不需要通过JavaScript来实现这一点，因为只有CSS支持这一点。

.logo-main {

}

.logo-main:hover {
    background-image: url(images/slides/glare.png);
}

Answer 4

您可以在悬停事件中添加背景，只需将其添加到样式表（css）...

.logo-main:hover {
    background: url(images/slides/glare.png);
}

Answer 5

@Alex：我在这里为你做了一个POC。请在这里找到我的代码......

HTML：

            <div class="logo-main"></div>

CSS：

.logo-main{
      background-    
         image:url(http://tommytoy.typepad.com/.a/6a0133f3a4072c970b016301ec8627970d-550wi);
        background-repeat:no-repeat;
        background-position:0 0;
        width:350px;
        height:165px;
        }

Jquery代码：

  $('.logo-main').mouseover(function() {
       $(this).css('backgroundPosition', '0 100%')
    .mouseout(function() {
     $(this).css('backgroundPosition', '0 0%') ;
    });
   });

Fiddle

如何在hover-jQuery上将背景图像应用于div

5 个答案:

Jquery代码：