悬停在Jquery的2张图片上

问题描述：

我试图用Jquery的悬停效果替换2张图片，但我遇到了问题。当我的鼠标仍处于具有悬停效果的div中时，2张图像闪烁。当鼠标仍在div中时，我想让图像不闪烁。悬停在Jquery的2张图片上

我的jQuery代码可能是错误的地方（我是一个初学者）。

$(document).ready(function() { 
 

 
    $(".project").hover(function() { 
 
     $(this).hide(); 
 
     $(this).next('div').show(); 
 
    }, function() { 
 
     $(this).show(); 
 
     $(this).next('div').hide(); 
 
    }); 
 

 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>

编辑：谢谢您的回答。我试试这个解决方案：

$(document).ready(function() { 

$(".project").mouseover(function() { 
    $('.hover').show(); 
    $('.project').hide(); 
}); 

$(".hover").mouseout(function() { 
     $('.project').show(); 
    $('.hover').hide(); 
});

}）;

它部分地工作。我忘了说我有其他的项目和悬停类的div。如果我使用此代码，则显示所有我的悬停div。我想一次只适用于div上的悬停效果。

感谢

你并不需要JavaScript的jQuery的也实现这一点，例如：https://stackoverflow.com/a/10888138/4108884 –

答

这里是你如何实现它偷偷摸摸的。我用<img>标签做了一个小窍门，这样div就可以根据图片自动调整大小。

希望这会有所帮助！

$(document).ready(function() { 
 

 
    $(".project").hover(function() { 
 
     $(".project").css("background-image","url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg)"); 
 
     
 
    }, function() { 
 
     $(".project").css("background-image", "url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg)"); 
 
     
 
    }); 
 

 
});

.project { 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg"); 
 
    background-repeat: no-repeat; 
 
    width: 300px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" style="visibility: hidden;" /> 
 
</div>

答

$(document).ready(function() { 
 

 
    $(".project").mouseover(function() { 
 
    $(this).hide(); 
 
    $('.hover').show(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $(this).hide(); 
 
    $('.project').show(); 
 
    }); 
 

 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>

$(".project").mouseover(function() { 
 
    $(this).hide(); 
 
    $('.hover').show(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $(this).hide(); 
 
    $('.project').show(); 
 
    });

您的代码段是破损而无法工作 –

，请复制粘贴错误，已检查，然后张贴在这里 –

错误：{ “消息”： “未捕获的ReferenceError：未定义$”， “文件名”： “https://stacksnippets.net/js”， “LINENO”：13， “colno”：9 } –

答

Look at below example

$(document).ready(function() { 
 
$(".project").mouseover(function() { 
 
    $('.hover').show(); 
 
    $('.project').hide(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $('.project').show(); 
 
    $('.hover').hide(); 
 
    }); 
 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>

悬停在Jquery的2张图片上

相关推荐