-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を介して単純なマウスオーバーおよびonclick関数を使用して、ユーザーはボックスを簡単に表示および閉じることができます。

私はもともとonMouseOut関数を使用してポップアップを閉じようとしましたが、それを正しく機能させる方法がよくわかりません。ただし、クローズリンクで問題は解決します。

于 2012-12-27T21:59:15.883 に答える