當div懸停時更改圖像

Question

我整天都在尋找解決方案。 我試圖做這樣的事情：

sigma-topline2012.com/en-us/topline-2012/bc-5-12/overview.html#highlight

如您所見，當我們在右側的說明上移動鼠標時，圖像正在改變。 有人可以幫我這些嗎？ 謝謝！

Answer 1

使用jQuery 懸停

http://jsfiddle.net/eah9bgkm/

<img id="image" src="http://placekitten.com/g/130/130" />

<ul>
    <li data-link="http://placekitten.com/g/150/150">Cat 1</li>
    <li data-link="http://placekitten.com/g/151/151">Cat 2</li>
    <li data-link="http://placekitten.com/g/152/152">Cat 3</li>
</ul>

$(document).ready(function(){
    var img = $('#image');
    $('li').hover(function(){
        img.attr('src', $(this).data('link'));
    });    
});

只需添加一個CSS類來淡入/淡出

Answer 2

嘗試這個：

<div id="definition1">Definition 1</div>
<div id="definition2">Definition 2</div>
<img id="imageWrapper" src="image1.png" />

Javacript：

$("#definition1").hover(function(){
    $('#imageWrapper').attr("src", function(index, attr){
        return attr.replace("image1.png", "image2.png");
    });
}, function(){
    $('#imageWrapper').attr("src", function(index, attr){
        return attr.replace("image2.png", "image1.png");
    });
});