html - マウスオーバーでdivの背景画像を変更する方法

Answer 1

あなたが提供したマークアップで、これは確かにCSSだけで可能です：

<a>
    <img src="http://placehold.it/100x100" /> 
    <div> 
    </div>
</a>​

アンカーがホバーされたときに、疑似セレクターを使用し:hoverてdivを選択できます

a:hover div
{
    background-image: url(http://placehold.it/400x400);
}

これにより、アンカーがホバーされたときにdivの背景が変更されます。これはすべての場合に機能するわけではありません。要素の関係を認識し、適切なセレクターを使用する必要があります。要素に関係がない場合は、Javascript（またはそのライブラリの1つ）を使用する必要があります。

http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/

Answer 2

これにより、スプライトなどを使用してこれを行うより良い方法がありますが、探しているものが達成されますbackground-position。でも：

あなたのHTML

<a class="selector">My Link</a>

あなたのCSS

.selector {
    background-image:url(myImage.jpg);
}

.selector:hover {
    background-image:url(myHoverImage.jpg);
}

Jquery ソリューション

HTML

<a class="selector" data-type="bgChanger1">
    My Link
</a>

<div data-type="bgChanger1">
    ...
</div>

Jクエリ

$(document).ready(function()
{
    var hoverElement = $('.selector'),

        dataType = hoverElement.attr('data-type'),

        linkedDiv  = $('div[data-type="' + data-type + '"]');

    hoverElement.hover(function(e)
    {
        e.preventDefault()

        linkedDiv.css('background-image', 'hoverImage.jps');
    },
    {
        linkedDiv.css('background-image', 'normalImage.jpg');
    });
});

Answer 3

jquery を使用してこれを行うことができます。

あなたのマークアップ:

<div id="div1"></div>
<div id="div2"></div>

あなたのスクリプト：

$("#div1").mouseover( function() {
   $("#div2").css("background-image", "url('image.png')");
});

Answer 4

次のように jquery スクリプトを追加するだけです。

 $(document).ready(function() {
    $('#div1').hover(function(){
      $('#div2').css("background","url(image_url)");
    });
 });