изменение изображения при наведении курсора, но без изменения положения изображения

Question

Я пытаюсь изменить изображение при наведении, и он должен быть довольно прямым, но по какой-то причине он не меняет изображение, и я заметил, что есть своего рода подергивание.

JQuery:

$('#first_default_circle').hover(
    function() { 
     $(this).find('.default').hide(); 
     $('#first_default_circle_hover.default_hover').show(); 
    }, 
    function() { 
     $('#first_default_circle_hover.default_hover').hide(); 
     $(this).find('.default').show(); 
    }); 

CSS:

.default { 
    height: 86px; 
    left: 280px; 
    top: 50px; 
    width: 86px; 
} 
img { 
    position: absolute; 
    background:#000; 
} 
.default_hover { 
    display: none; 
    height: 119px; 
    left: 261px; 
    top: 40px; 
    width: 119px; 
} 

Jsfiddle: http://jsfiddle.net/squidraj/Z6rNF/

Пожалуйста, любой вид помощи является высоко было оценено заранее.

Answer 1

FIDDLE

JS

$("#circle").hover(

function() { 
    $('.default').hide(); 
    $('.default_hover').show(); 
}, 

function() { 
    $('.default_hover').hide(); 
    $('.default').show(); 
}); 

HTML

<div id="circle"> 
    <img src="http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png" class="default"> 
    <img src="http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png" class="default_hover"> 
</div> 

Или, если вы предпочитаете с какой-то эффект замирания:

FIDDLE

Answer 2

$('#first_default_circle').mouseenter(function() { 

    $('.default').attr('src','http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png') 
}).mouseleave(function() { 

    $('.default').attr('src','http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png') 
}); 

Я настоятельно рекомендую использовать мышь, мышь, поскольку они срабатывают только при вводе и выходе из элемента.

Answer 3

$('#first_default_circle').mouseenter(function(){ 
$('#first_default_circle').find('img').attr("src","http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance_ho.png"); 
}); 

$('#first_default_circle').mouseleave(function(){ 
$('#first_default_circle').find('img').attr("src","http://www.demo-pinksquid.co.uk/img/rewarding_icon_private_medical_insurance.png"); 
}); 

Вы можете использовать, как это вместо того, чтобы ваш Jquery скрипт

Обновленный ссылка http://jsfiddle.net/Z6rNF/3/

Answer 4

Ваши селекторы не правы:

$('#first_default_circle_hover.default_hover') 

Должно быть:

$('#first_default_circle_hover .default_hover') 

Я также немного очистил ваш CSS.

Работа демо: http://jsfiddle.net/Z6rNF/1/