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

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

演示：小提琴

但可能你想要的是

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

演示：小提琴

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

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

---

小提琴