如何在悬停时将背景图像应用于 div - jQuery答案

【问题标题】：How to apply backround image to div on hover- jQuery如何在悬停时将背景图像应用于 div - jQuery
【发布时间】：2013-03-09 01:08:41
【问题描述】：

我想给这个 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>

有什么建议吗？

【问题讨论】：

控制台中的任何错误
不工作是什么意思
确保您提供正确的图像路径。

标签： jquery css background hover

【解决方案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

【讨论】：

【解决方案2】：

尝试使用背景图像（并将 : 替换为 ,）..

<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>

【讨论】：

【解决方案3】：

您无需通过 JavaScript 执行此操作，因为仅使用 CSS 即可支持此操作。

.logo-main {

}

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

【讨论】：

【解决方案4】：

您可以在悬停事件上添加背景，只需将其添加到样式表 (css)...

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

【讨论】：

【解决方案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

【讨论】：