How do I position a div next to a mouse click using JQuery?
如何使用JQuery在鼠标单击旁边放置div?
Thanks
谢谢
2 个解决方案
#1
30
You can try:
你可以试试:
$( "td").click( function(event) {
$("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});
After additional question was asked in the comment:
在评论中提出其他问题后:
$( "td").click( function(event) {
var div = $("#divId");
div.css( {
position:"absolute",
top:event.pageY,
left: event.pageX});
var delayTimer = setTimeout( function( ) {
$that.fadeIn( "slow");
}, 100);
div.mouseover( function( event) {
if (delayTimer)
clearTimeout( delayTimer);
}).mouseout( function(){
if (delayTimer)
clearTimeout( delayTimer);
var $that = $(this);
delayTimer = setTimeout( function( ) {
$that.fadeOut( "slow");
}, 500)
});
});
#2
1
Something like:
就像是:
$('#cell').bind('click',
function(e){
$('#div').css('left',e.pageX + 'px' );
$('#div').css('top',e.pageY + 'px' ); });
The div's position should be set to absolute.
div的位置应设置为绝对值。
#1
30
You can try:
你可以试试:
$( "td").click( function(event) {
$("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});
After additional question was asked in the comment:
在评论中提出其他问题后:
$( "td").click( function(event) {
var div = $("#divId");
div.css( {
position:"absolute",
top:event.pageY,
left: event.pageX});
var delayTimer = setTimeout( function( ) {
$that.fadeIn( "slow");
}, 100);
div.mouseover( function( event) {
if (delayTimer)
clearTimeout( delayTimer);
}).mouseout( function(){
if (delayTimer)
clearTimeout( delayTimer);
var $that = $(this);
delayTimer = setTimeout( function( ) {
$that.fadeOut( "slow");
}, 500)
});
});
#2
1
Something like:
就像是:
$('#cell').bind('click',
function(e){
$('#div').css('left',e.pageX + 'px' );
$('#div').css('top',e.pageY + 'px' ); });
The div's position should be set to absolute.
div的位置应设置为绝对值。