如何在悬停时弹出图像？答案

【问题标题】：How to pop up an image on hover?如何在悬停时弹出图像？
【发布时间】：2014-02-27 07:48:37
【问题描述】：

我的页面有一个包含更多列和行的表格。每一行和每一列都有小图像。 for 循环用于调用图像。我想在悬停时弹出图像。

有可能吗？

提前致谢。

【问题讨论】：

您能否更具体地描述您的要求？弹出的图像将如何消失？
不使用 javascript : stackoverflow.com/questions/11683620/… 希望对您有所帮助。
请尝试引导程序。也许你可以在那里找到答案

标签： javascript php jquery

【解决方案1】：

我可以在这里想象这样的事情：

$(".image").hover(function(){
    //display bigger image here
}, function() {
    //hide it here
});

替代方案，你可以使用 CSS :hover

【讨论】：

【解决方案2】：

是的，这是可能的。

使用 JQuery 鼠标悬停事件：http://api.jquery.com/mouseover/

还有一个像magnific popup这样的弹出插件：http://dimsemenov.com/plugins/magnific-popup/

【讨论】：

【解决方案3】：

下面的代码可以创建一个弹出窗口：

$("body").on('mouseover','#image_id',function(){      
//popup image.    
});

【讨论】：

【解决方案4】：

简单你可以像这样使用jquery悬停功能

$('img').hover(function(){

    $(this).css('width' , '500px');
    $(this).css('height' , '500px');
},function(){

    $(this).css('width' , '200px');
    $(this).css('height' , '200px');
})

这是图片的html代码

<div id="main_container">
    <div id="div1">
        <img src="img/angelinasmall.jpg" style="width: 200px; height: 200px;" />
    </div>
    <div id="div2">
        <img src="img/hayden.jpg" style="width: 200px; height: 200px;" />
    </div>
    <div id="div3">
        <img src="img/milla.jpg" style="width: 200px; height: 200px;"/>
    </div>
</div>

【讨论】：