如何通过 jQuery 保持鼠标悬停的 DIV 可见?
好吧..问题有点复杂。当您将鼠标悬停在 TR 上时,我会出现一个 DIV。
$(".alignment_tr").hover( function() {
console.log( "alignmententer" + triggerMouseover );
var tid = $(this).find( ".hidden_inp_selected_alignment" ).val();
var element = $(this);
if( ! element.hasClass( "mouseover-tooltip" ) )
{
$.ajax( {
url: Drupal.settings.jstools.basePath + "?q=search/mouseover_info",
dataType: 'json',
data: { "tid": tid },
success: function( response ) {
$(".mouseover-tooltip .top-level").html( response.genre );
$(".mouseover-tooltip .second-level").html( response.name );
$(".mouseover-tooltip .description").html( response.description );
$(".mouseover-tooltip").css( {
left: element.position().left + ( element.width() * 0.75 ),
top: element.position().top - element.height() / 2,
} );
if( $(".mouseover-tooltip").css( "display" ) == "none" )
{
$(".mouseover-tooltip").fadeIn();
}
}
});
}
},
function() {
console.log( "alignmentleave" + triggerMouseover );
setTimeout( fadeMouseover, 5000 );
}
);
我试图让它当你将鼠标悬停在 DIV 上时,它不会消失。有什么建议吗?
澄清 现在,当您将鼠标悬停在 TD 上时,就会出现 DIV。我对其进行了操纵,以便当您将鼠标悬停在 DIV 上时,它会保持不变(过去会消失)。但现在当鼠标离开 TR 并离开 DIV 时,DIV 不会消失。
Okay.. a bit complicated of a question. I have a DIV that appears when you mouseover a TR.
$(".alignment_tr").hover( function() {
console.log( "alignmententer" + triggerMouseover );
var tid = $(this).find( ".hidden_inp_selected_alignment" ).val();
var element = $(this);
if( ! element.hasClass( "mouseover-tooltip" ) )
{
$.ajax( {
url: Drupal.settings.jstools.basePath + "?q=search/mouseover_info",
dataType: 'json',
data: { "tid": tid },
success: function( response ) {
$(".mouseover-tooltip .top-level").html( response.genre );
$(".mouseover-tooltip .second-level").html( response.name );
$(".mouseover-tooltip .description").html( response.description );
$(".mouseover-tooltip").css( {
left: element.position().left + ( element.width() * 0.75 ),
top: element.position().top - element.height() / 2,
} );
if( $(".mouseover-tooltip").css( "display" ) == "none" )
{
$(".mouseover-tooltip").fadeIn();
}
}
});
}
},
function() {
console.log( "alignmentleave" + triggerMouseover );
setTimeout( fadeMouseover, 5000 );
}
);
I'm trying to get it so that when you mouse over the DIV, it doesn't just disappear. Any tips?
CLARIFICATION
Right now, when you mouseover the TD, the DIV appears. I rigged it so that when you mouseover the DIV, it stays (used to disappear). But now the DIV doesn't disappear when your mouse leaves the TR AND leaves the DIV.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果
div
是绝对定位的(我相信确实如此),请将其放置在tr
中。这样,您的鼠标悬停在 div 上也将被视为悬停在td
上。这样,您的鼠标悬停在div
或tr
上就不会触发mouseleave
。小提琴:
http://jsfiddle.net/mHCNj/1/
If the
div
is absolutely positioned, which I believe it is, place it within thetr
. In that way, your mouse being over the div will count as it being over thetd
as well. That way your mouse being over thediv
or thetr
will not triggermouseleave
.A fiddle:
http://jsfiddle.net/mHCNj/1/