悬停时如何显示表单[关闭]答案

【问题标题】：how to display form when hover [closed]悬停时如何显示表单[关闭]
【发布时间】：2012-12-27 20:49:51
【问题描述】：

我有一张图片拼贴。我希望能够将鼠标悬停在它们上方并单击“制作个人资料图片”，以便将其设为个人资料图片。

类似于 facebook，如果您将鼠标悬停在图片上，则可以选择编辑/喜欢/评论。

谢谢。

我有以下，但它不工作。

<%= link_to image..., :id => "pic" %>
<%= link_to "Profile Pic".... , :remote => true, :id => "pf" %>

jQuery

$('#pic').hover(function() {
  $('#pf').show()
})

【问题讨论】：

it's not working 是什么意思？
@ExplosionPills：也许是懒惰？也许它需要适当的动机。
也许link_to（第一行；一个下划线）和link to（第二行；一个空格）之间的差异是这里的原因？
@ExplosionPills，当我将鼠标悬停在图片上时没有任何反应。
@ming 你有错误吗？您是在 document.ready 中包装代码还是将其放在 </body> 之前？

标签： javascript jquery ruby-on-rails

【解决方案1】：

你可以试试这样的：

http://jsfiddle.net/jrb9249/UsnfT/3/

内联代码如下所示：

HTML：

<body>
<div id="div_parent">
    <img id="myImg" src="http://s13.postimage.org/x23kf7ycz/DSC02036.jpg"
    onMouseOver="javascript:myMouseOver()"/>
    <div id="div_child"
    onMouseOut="javascript:myMouseOut()">
        <a target="_blank" id="myLink">Make profile Picture</a>
        <br><br>
        <a target="_blank" id="closeLink" onclick="javascript:mytest()">Close</a>        
    </div>
</div>
</body>

Javascript：

function myMouseOver(){
    $('#div_child').fadeIn('fast');
};

function mytest(){
    $('#div_child').fadeOut('fast');
};

CSS：

div
{
    border:none;
    margin:0;
    padding:0;
}

#div_child a:hover
{
    cursor:pointer;
}

#div_parent
{
    position:relative;
}

#div_child
{
    position:absolute;
    left:155px;
    top:0px;
    display:none;
    border:solid 1px gray;
    padding:5px;
}

#div_parent img
{
    width:150;
    height:112;
}

#closeLink
{
    color:blue;
    font-size:6;
    float:right;
}

#closeLink:hover
{
    text-decoration:underline;
}

它使用相对定位的父级和绝对定位的子级来偏移选项框。然后通过 jquery 使用简单的 mouseover 和 onclick 功能，用户可以轻松查看和关闭框。

我最初尝试使用 onMouseOut 函数来关闭弹出窗口，但我不太确定如何使其正常工作。关闭链接解决了这个问题。

【讨论】：