我正在尝试添加一个 Jquery 函数,用于在我的 html 结构中的跨度内的链接悬停时更新 div
<ul><li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/aruna">Aruna </a>
</span>
<div style="display: none;" class="image_hover">
Student
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
<li>
<div class="timeline">
<span>by</span>
<span class="vcard">
<a class="underline user-link" href="/users/jasmine">jasmine </a>
</span>
<div style="display: none;" class="image_hover">
Professor
<p>
<a onclick="" href="#">Show additional details</a>
<a href="#">view</a>
<p>Employee ID : </p>
<p>Project Name: </p>
<p>Project Role : r</p>
<p>Supervisor Name : </p>
</p>
</div>
<span class="timeline">about 1 day ago</span>
</div>
</li>
</ul>
我写的jQuery是
我像这样写
jQuery(document).ready(function(){
var _selectedLinkEl = null;
var _detailEl = null;
var body = jQuery("body");
var elem=null;
jQuery(".user-link").mouseover(function(event) {
_selectedLinkEl = this;
_detailEl=jQuery(event.target).parent().next();
//_detailEl.show();
_detailEl.fadeIn("slow");
elem=jQuery(this).parent().next();
_href=jQuery(this).attr('href').split("/")[2];
jQuery.post('/users/user_detail/?name='+_href,
function(data){
//elem.html(data).show();
elem.html(data).fadeIn("slow");
});//post
body.mouseover(_bodyMouseOverFunction);
}); // user-link
var _bodyMouseOverFunction = function(event) {
if(event.target != _selectedLinkEl &&
event.target != _detailEl &&
jQuery.inArray(_detailEl, jQuery(event.target).parent() ) == -1) {
//_detailEl.hide();
_detailEl.fadeOut("slow");
body.unbind("mouseover", _bodyMouseOverFunction);
}
};// mouseover
});
上面的 jquery 更新了 image-hover div 并通过fadeIn 显示 div 但它总是淡出。
只有当我的鼠标悬停在 div(image_hover) 或任何正文元素之外时,我才试图淡出 DIV image_hover。
在这种情况下,如果我的鼠标位于链接或 div 上或 div (image_hover) 内的任何元素上,则 Div 不应淡出。
请对此提出建议/。
怎么办??