-3

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

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

谢谢。

我有以下内容，但它不起作用。

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

jQuery

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

1 回答 1

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 函数来关闭弹出窗口，但我不太确定如何使其正常工作。虽然关闭链接解决了这个问题。

于 2012-12-27T21:59:15.883 回答