Vous pouvez essayer quelque chose comme ceci:
http://jsfiddle.net/jrb9249/UsnfT/3/
Le code en ligne ressemble à ceci:
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;
}
Il utilise le parent relativement positionné et placé de façon absolue l'enfant pour compenser la boîte d'options. Puis, en utilisant les fonctions simples de mouseover et onclick via jquery, l'utilisateur peut facilement voir et fermer la boîte.
J'ai essayé à l'origine d'utiliser une fonction onMouseOut pour fermer la fenêtre contextuelle, mais je ne suis pas tout à fait sûr de la façon de le faire fonctionner correctement. Le lien étroit résout cependant le problème.
Que signifie «ça ne marche pas»? –
@ExplosionPills: Peut-être que c'est paresseux? Peut-être qu'il a besoin de la bonne motivation. –
Peut-être la différence entre 'link_to' (première ligne, un trait de soulignement) et' link to' (deuxième ligne, un espace) est la cause ici? –