あなたはこのようなことを試すことができます:
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関数を使用してポップアップを閉じようとしましたが、それを正しく機能させる方法がよくわかりません。ただし、クローズリンクで問題は解決します。