HTML鼠标悬停显示隐藏div,javascript – 在鼠标悬停时显示/隐藏DIV

[reedit基于评论] jsfiddle修订,删除了css-only解决方案.诀窍是监视滑动元素的悬停状态并使用超时允许用户在滑动元素上移动(另请参阅更新的jsfiddle中的注释).

来自OPs jsfiddle @here的jsfiddle

使用#ids的悬停功能：

function hover(e){

e = e || event;

var el = e.target || e.srcElement

,showel = $('#dvNotifications')

;

if (!/NotificationSummary/i.test(el.id)) {

showel .attr('data-ishovered',/over/i.test(e.type));

} else {

showel .attr('data-ishovered',false)

}

if (/true/i.test(showel .attr('data-ishovered'))){return true;}

if (/over$/i.test(e.type) && /NotificationSummary/i.test(el.id)){

showel .slideDown();

} else {

setTimeout(function(){

if (/false/i.test(showel .attr('data-ishovered'))) {

showel .slideUp();

showel .attr('data-ishovered',false);

}

}

,200);

}

}