0

我正在尝试更改悬停时的图像，它应该非常简单，但由于某种原因，它并没有改变图像，我也注意到有一种抽搐。

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/

非常感谢任何形式的帮助。在此先感谢。

4

4 回答 4

1 
$('#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')
 });

我强烈建议使用 mouseenter、mouseout 功能，因为它们仅在您进入和离开元素时触发。

于 2013-08-27T14:46:20.827 回答
1

小提琴

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>

或者，如果您更喜欢一些淡入淡出效果：

小提琴

于 2013-08-27T15:02:11.890 回答
0 
$('#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/

于 2013-08-27T14:57:28.470 回答
0

您的选择器不正确：

$('#first_default_circle_hover.default_hover')

应该：

$('#first_default_circle_hover .default_hover')

我还稍微清理了你的 CSS。

工作演示：http: //jsfiddle.net/Z6rNF/1/

于 2013-08-27T14:58:31.390 回答