0

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

助言がありますか？

4

5 に答える 5

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

デモ:フィドル

于 2013-03-20T04:08:09.893 に答える
0

代わりにbackground-imageを試してください（そして：を、に置き換えてください）。

<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>
于 2013-03-20T04:06:44.940 に答える
0

@Alex：ここで私はあなたのために1つの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%') ;
    });
   });

フィドル

于 2013-03-20T04:22:26.847 に答える
0

これは CSS だけですぐにサポートされるため、JavaScript を介してこれを行う必要はありません。

.logo-main {

}

.logo-main:hover {
    background-image: url(images/slides/glare.png);
}
于 2013-03-20T04:08:11.500 に答える
0

これをスタイルシート（css）に追加するだけで、ホバーイベントに背景を追加できます...

.logo-main:hover {
    background: url(images/slides/glare.png);
}
于 2013-03-20T04:09:06.837 に答える